Vue+Element-ui改造upload组件进行多文件一次上传

原创

于 2019-03-07 16:16:09 发布 · 置顶 · 1.3w 阅读

标签

本文介绍了如何改造Element-ui的upload组件以实现多文件一次性上传。在默认情况下，Element的多文件上传会分多次请求。通过自定义上传方法，利用FormData和axios，可以在上传图片时发送一次请求完成所有文件的上传。详细步骤包括在Vue数据中创建FormData对象，将文件和参数加入其中，然后使用axios提交请求。参考资料包括FormData和axios的官方文档，以及一篇来自CSDN的文章。

Element组件功能强大，扩展性也好，upload文件上传组件支持单文件上传，对于办公文件，头像等都有专门的解决方案，同时可以附加参数，并且也能进行多文件上传，但是这里的多文件上传是分多次请求发送到后台的，可能不符合大多数情况的需求。

本次的需求是做故障报修模块，需要图片上传，并且是多文件一起上传，发一次请求搞定，这时需要对upload组件进行改造，放弃Element的默认上传方法，自己编写上传方法：

                            <el-form-item label="图片">  
                                <el-upload
                                :action="uploadUrl"
                                :multiple="true"
                                ref="upload"
                                list-type="picture-card"
                                :on-success='uploadSuccess'
                                :on-error='uploadError'
                                :on-preview="handlePictureCardPreview"
                                :on-change="onChange"
                                :on-remove="onRemove"
                                :auto-upload="false">
                                <i class="e

最低0.47元/天解锁文章