1.上传代码 vue
<el-upload list-type="picture-card" ref="uploadXsz" :limit="20" accept="*" :action="upload.url" :headers="upload.headers" :file-list="upload.fileListXsz" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccessXsz" :auto-upload="true" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload>
2.删除多余的图片,注(单个文件上传的话,可不写这个函数)
handleRemove(file,fileList) { console.log(file, fileList); this.form.xsz = JSON.stringify(fileList);//多文件删除操作 }
以上仅为多文件的部分代码(具体请参考element ui官方文档),因为本人遇到过此坑,耽误了半天时间才搞明白,记录一下!
element ui 多文件上传
最新推荐文章于 2024-08-14 01:24:28 发布
本文记录了使用Vue.js进行图片上传时遇到的问题及解决方案,特别是如何实现多文件上传和删除功能。通过Element UI组件库的`el-upload`,设置`on-remove`回调函数实现文件移除,并更新文件列表状态。对于单个文件上传场景,该功能可省略。这是一个前端开发中关于Vue和文件管理的实用技巧。
摘要由CSDN通过智能技术生成