解决Elementui upload多图上传回调只执行一次问题

96 阅读 0 评论 64 点赞

我是靠谱客的博主鲜艳钢笔，这篇文章主要介绍解决Elementui upload多图上传回调只执行一次问题，现在分享给大家，希望可以做个参考。

项目编辑发布文章需要上传多图，并且需要回显编辑删除功能。使用el-upload上传初始感觉很方便，多试后发现坑还是蛮多的。发现on-change事件基本没什么用，一次上传多张图片实际还是单张上传，多次调用接口不说，上传成功后的回调也仅执行一次，这点很坑爹，研究许久多次尝试最终找到解决方案：

上代码：

复制代码

1
2
3
<el-upload multiple :action="actionsUrl" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handlenewsImage" :on-remove="(file, fileList) => {removeImg(file, fileList)}" name="images" :file-list="newsImg">
    <i class="el-icon-plus"></i>
</el-upload>

上传成功回调事件 handlenewsImage 方法：

复制代码

1
2
3
4
5
6
7
8
9
handlenewsImage(res, file, fileList) {
    this.newArray.push(this.urlList(res))
},    
urlList(res){//公司项目为了回显并且保存服务器传回URL，故需要做此处理
    let obj = new Object(); 
    obj.url = this.hanldImgUrl(res.content[0]);
    obj.serveUrl = res.content[0];
    return obj;
},

上面data中相关数据：

复制代码

1
2
3
4
 data() {
    return {newsImg:[],newArray : [],goodForm: { language: "en", newsThumbnail:{}, newsImage:[]},
    }
  },

最终提交表单时与file-list绑定的数组合并提交，公司这边图片列表是用json字符串传递的：

复制代码

1
2
3
4
    handsubmit() {
      this.$refs.goodForm.validate(valid => {
       if (valid) {
        this.goodForm.newsImage = JSON.stringify([...this.newsImg,...this.newArray]);

BUG最终是解决完了，但是还有个疑问就是，没想通为什么 handlenewsImage 方法中直接将数据PUSH到newsImg始终不行，一旦push过去，就会只显示上传多张图片中的一张，很诡异！