el-upload批量上传

最近在处理 el-upload 上传图片，上传单张图片成功时直接在on-success里面进行 push ，图片成功展示。

但在进行批量上传的时候 在on-success里面进行 push ，图片只能 push 第一张进去。

因为在 on-success 只会对 status = ‘success’ 图片进行处理，在执行第一张图片时候，其他的图片状态还是 uplaoding。然后对 fileList 进行了 push 操作，后面图片的 on-success 就不会执行了。

所以 批量上传 时需要对 fileList 进行处理，需要等所有图片都成功时再进行push操作。

由于 on-success 第三个参数 fileList 会展示所有的图片，即在给 el-upload 设置了默认图片也会展示，push时会出现异常，所以可以根据 图片上传接口 响应出参进行特殊处理。

<el-upload
  multiple
  list-type="picture-card"
  :headers="headers"
  :data="dataObj"
  :action="action"
  :file-list="fileList"
  :limit="20"
  :before-upload="beforeUpload"
  :on-success="handleImageSuccess"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :on-exceed="handleExceed"
>
</el-upload>

beforeUpload(file) {
 const _self = this
  const _URL = window.URL || window.webkitURL
  return new Promise(resolve => {
    const img = new Image()
    img.src = _URL.createObjectURL(file)
    img.onload = function() {
      _self.fileList.push({
        hasSuccess: false,
        uid: file.uid,
        width: this.width,
        height: this.height
      })
    }
    resolve(true)
  })
},

// 所以 批量上传 时需要对 fileList 进行处理，需要等所有图片都成功时再进行push操作。
handleImageSuccess(response, file, fileList) {
  if (fileList.every(v => v.status === 'success')) {
    fileList.forEach(item => {
      const index = this.fileList.findIndex(img => img.uid === item.uid)
      // 由于 on-success 第三个参数 fileList 会展示所有的图片，即在给 el-upload 设置了默认图片也会展示，push时会出现异常，所以可以根据 图片上传接口 响应出参进行特殊处理。
      if (item.response && index >= 0) {
        this.fileList[index].name = item.name
        this.fileList[index].url= item.response.data.url
      }
    })
    // 当图片上传不成功时，可以进行 强制渲染（慎用）
    // this.$forceUpdate()
  }
},
// 移除图片
handleRemove(file) {
  const { imgPath } = file
  this.fileList = this.fileList.filter(item => {
    return item.url!== url
  })
},

handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url
  this.dialogVisible = true
},

handleExceed(files, fileList) {
  this.$message.warning(`最多上传20张商品图片。`);
},