vue实现图片列表上传更换图片生成数组效果代码-html代码-BFW代码库

vue实现图片列表上传更换图片生成数组效果代码

代码语言：html

所属分类：上传

代码描述：vue实现图片列表上传更换图片生成数组效果代码，使用v-for循环输出图片，点击每张图片右上角可上传新图片，生成新的图片数组。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Vue Image Hover Replace</title>
    <style>
        img{
              max-width:300px;
          }
            .image-container {
              position: relative;
              display: inline-block;
            }
            .image-upload {
              position: absolute;
              top: 10px;
              right: 10px;
              display: none;
            }
            .image-container:hover .image-upload {
              display: block;
              background: blue;
              color:white;
              cursor: pointer;
            }
        
            /* 隐藏默认的文件选择控件 */
            .image-upload input[type='file'] {
              display: none;
            }
    </style>
</head>

<body>

    <div id="app">
        <div class="image-container" v-for="(imageUrl, index) in imageUrls" :key="index">
            <img :src="imageUrl" :alt="'Image ' + (index + 1)">
            <label class="image-upload">
      <!-- 自定义的上传按钮 -->
      <span>⬆上传新图片</span>
      <!-- 隐藏的file input，用于选择图片 -->
      <input type="file" @change="onFileChange($event, index)">
    </label&g.........完整代码请登录后点击上方下载按钮下载查看