博客

问题：el-upload自动上传多个文件时，每个文件调用一次接口（10个就是10次），只会调用一次on-success，也就是fileList只会展示一个file。

想要达到的效果：当使用el-upload自动上传多个文件时，想通过on-success控制fileList动态展示后端返回的文件预览图和名称

解决办法：（也有其他办法，这里只写我是怎么做的）

用两个el-uplaod组件，一个用来上传，一个用来展示。有两种使用方法，我需要采用el-uplaod自带的文件列表所以就一上一下的放置两个组件

<el-upload  // 上传用
  class="upload-demo"
  ref="upload"
  drag
  multiple
  action="上传地址"
  :limit="10"
  :disabled="(limitNum > 0 ? false : true) || loading"
  :before-upload="handleBeforeUpload"
  :on-exceed="handleExceed"
  :on-error="handleError"
  :on-success="handleSuccess"
  :on-remove="handleRemove"
  name="uploadFile"
  :data="{
    materialType: materialForm.materialType
  }"
  list-type="picture">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip">图片文件不超过20M，视频文件不超过500M</div>
</el-upload>
<el-upload  // 展示用
   action="#"
   class="upload-demo second-upload"
   list-type="picture"
   :auto-upload="false"
   :file-list="fileList"
   :on-remove="handleRemove">
</el-upload>
<script>
data () {
  return {
    fileList: [], // 保存上传成功的图片
    imgType: ['jpg', 'jpeg', 'png'],
    videoType: ['mp4', 'MP4', 'mov', 'avi', 'rm', 'rmvb', 'm4v', 'mkv', '3gp', 'wmv', 'ts', 'm2ts'],
    fileList: [], // 上传成功列表
    fileNum: 0, // 通过校验可以上传个数
    failNum: 0 // 上传失败个数
  }
},
 methods: {
  handleBeforeUpload (file, fileList) {
      let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      let isImg = false
      let isVideo = false
      let size = file.size / 1024 / 1024
      isImg = this.imgType.includes(extension)
      isVideo = this.videoType.includes(extension)
      if (isImg) {
        if (size > 20) {
          this.$message.warning(`文件大小不得超过20M`)
          return false
        }
      } else if (isVideo) {
        if (size > 500) {
          this.$message.warning(`文件大小不得超过500M`)
          return false
        }
      } else {
        this.$message.error(`请上传 ${this.imgType.join('/')} 格式图片，或者 ${this.videoType.join('/')} 格式视频 `)
        return false
      }
      this.loading = true
      this.fileNum++
    },
   handleSuccess (res, file, fileList) {
      let uploadFiles = this.$refs.upload.uploadFiles
      if (res.code === 0) {
        this.fileList.push({
          name: res.data[0].fileName,
          url: res.data[0].imageUrl
        })
        for (let i = 0; i < uploadFiles.length; i++) {
          if (uploadFiles[i].response && uploadFiles[i].response.data && (uploadFiles[i].response.data[0].md5 === res.data[0].md5)) {
            uploadFiles.splice(i, 1)
            break
          }
        }
        let obj = this.genDefault()
        this.materialList.push({ ...obj, ...res.data[0] })
        if (this.fileNum === this.fileList.length + this.failNum) {
          this.loading = false
          this.$message.success('上传成功')
          this.materialForm.md5 = this.materialList[0].md5
        }
      } else {
        for (let i = 0; i < uploadFiles.length; i++) {
          if (file.uid === uploadFiles[i].uid) {
            uploadFiles.splice(i, 1)
            break
          }
        }
        this.failNum++
        this.limitNum++
        if (this.fileNum === this.fileList.length + this.failNum) {
          this.loading = false
        }
        this.$message.error(`${file.name} 文件上传失败`)
      }
    },
    handleRemove (file, fileList, type) {
      if (file.status === 'success') { // 这里加判断的原因是，区别是组件内部调用还是用户手动删除，当选择文件不符合before-upload的限制时，组件内部会调用一次remove函数从上传列表中删除此文件，此时文件的状态只有上传成功status才是success.
        this.fileList = JSON.parse(JSON.stringify(fileList))
        let index = this.materialList.findIndex(item => item.imageUrl === file.url)
        this.materialList.splice(index, 1)
        this.fileNum--  // 删除的时候，记得也要-- 不然success里通过比较上传成功个数和通过校验个数来进行的弹窗等操作会有问题
      }
    },
}
</script>