vue前端实现批量上传图片功能并回显图片

methods: {
updateImgs(fieldname) {
      const inputFile = document.createElement('input')
      inputFile.type = 'file'
      inputFile.accept = 'image/*' // 只接受图片文件
      inputFile.multiple = true // 允许选择多个文件

      inputFile.click() // 触发文件选择对话框

      inputFile.onchange = async (e) => {
        const files = e.target.files // 获取所有选中的文件
        if (!files.length) return // 如果没有选中文件，直接返回

        // 遍历每个文件
        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          const fileSizeMB = file.size / (1024 * 1024) // 转换为MB

          if (fileSizeMB > 2) {
            // 文件大小超过2MB，显示提示信息
            this.$message.error(`文件 ${file.name} 大小不能超过2MB`)
            continue // 跳过当前文件，继续检查下一个文件
          }

          // 使用 FormData 来构建上传的数据
          const formData = new FormData()
          formData.append('file', file)

          try {
            const { data: res } = await uploadFile(formData) // 你的配置后的上传图片接口
             //根据接口返回存图片的url 例this.xxx = res，之后应用到你的新增/编辑接口
             this.reportData.projimplement.imglist.push({
                  url: res.data.filePath,
                  description: file.name
                })
          } catch (error) {}
        }
      }
    },
    getFullImageUrl(relativePath) {
      // 结合服务器前缀和相对路径
      return `${this.serverPrefix}${relativePath}`
    },
    getPreviewList(imgList) {
    // 显示图片组
      return imgList.map((item) => this.getFullImageUrl(item.url))// 你的结构
    }
  }

<div style="position: relative">
            <el-button class="upimg_but" type="primary" size="small" @click="updateImgs"
              >上传</el-button
            >
            <div class="img-block">
              <div class="img-box" v-for="(item, index) in reportData.projimplement.imglist" :key="index">
                <el-tooltip effect="dark" :content="item.description" placement="bottom">
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="getFullImageUrl(item.url)"
                    fit="contain"
                    lazy
                    :preview-src-list="getPreviewList(reportData.projimplement.imglist)"
                  ></el-image>
                </el-tooltip>
                <i class="el-icon-delete" style="cursor: pointer" @click="deleteImg(index)"></i>
              </div>
            </div>
          </div>

.img-block {
  padding-top: 30px;
  max-height: 320px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;

  &::-webkit-scrollbar-track-piece {
    background: #e4e4e4;
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 20px;
  }

  .img-box {
    width: 33%;
    text-align: center;
    margin: 8px 0;
  }
}