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

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

上代码:

<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 方法:

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中相关数据:

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

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

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

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

是的,ElementUI提供了el-upload组件来实现上传片并支持预览和删除的功能。你可以通过设置el-upload组件的属性来实现这些功能,具体步骤如下: 1. 在Vue组件中引入el-upload组件 ```javascript <template> <el-upload class="upload-demo" action="your-upload-api" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" multiple list-type="picture-card"> <!--上传按钮--> <i class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </template> <script> export default { data() { return { fileList: [], // 文件列表 }; }, methods: { // 预览片 handlePreview(file) { console.log(file); }, // 删除片 handleRemove(file, fileList) { console.log(file, fileList); }, }, }; </script> ``` 2. 设置el-upload组件的属性 - `action`: 文件上传的API地址 - `on-preview`: 预览片的回调函数 - `on-remove`: 删除片的回调函数 - `file-list`: 已上传片列表 - `multiple`: 是否支持选 - `list-type`: 列表显示方式,这里设置成`picture-card`以卡片形式显示 3. 实现预览和删除的回调函数 `handlePreview`函数接收一个参数`file`,表示当前预览的文件对象,你可以通过调用浏览器内置的片预览方法来实现片预览功能。 `handleRemove`函数接收两个参数`file`和`fileList`,分别表示当前删除的文件对象和文件列表。你可以在这个函数里面通过操作`fileList`中的元素来实现删除片的功能。 以上就是实现ElementUI上传片并支持预览和删除的方法。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值