element ui upload组件上传多个图片为什么无法获取所有图片地址

Question

<el-upload
  ref="uploadMainImage"
  :action="uploadImageUrl"
  :data="uploadData"
  :headers="headers"
  list-type="picture-card"
  multiple
  :limit="6"
  name="goods_img"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :file-list="form.goods_img"
  :on-success="onSuccess"
  :on-change="onChange"
>

// 文件上传成功时的钩子
onSuccess(res, file, fileList) {
  this.$refs.uploadMainImage.uploadFiles.forEach(e => {
    console.log(e)
    if (e.status === "success") {
      if (e.response) {
        this.form.goods_img.push({
          url: e.response.data,
          status: 'success'
        })
      }
    }
  })
}

我选择两张图片上传，都返回正常，我想把返回回来的图片地址push进this.form.goods_img，但是前端打印出来这里怎么一个是uploading状态并且url也是blob形式呢

补充：

onSuccess(res, file, fileList) {
  console.log(res)

这样可以把所有的图片都打印出来

但是我在后面加上push后就只能打印出第一个了

onSuccess(res, file, fileList) {
  console.log(res)
  this.form.goods_img.push({
    url: res.data,
    status: 'success'
  })

Answer 1

你取response的值，uploading应该是你上传没到服务器吧，blob本地预览那个有兼容性问题

Answer 2

已解决。

参考链接：https://tdyangyang.com/2019/0...

Answer 3

on-change

有这个方法