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

末蓝、 2022-03-11 07:42 486阅读 0赞

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="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible" append-to-body>
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </el-form-item>

其中的onChange和onRemove方法绑定用来控制实际上传的文件组：

onChange(file,fileList){
                this.fileList = fileList;
            },
            onRemove(file,fileList){
                this.fileList = fileList;
            },

相信大多数前端工作者都熟悉原生html的多文件上传，这里自定义的上传方式就是模拟html表单上传文件，首先在vue的数据定义做 uploadForm:new FormData() 用来存放表单数据，然后将文件和附加参数分别存入uploadForm：

this.uploadForm.append("houseId",this.myFaulttreamentForm.houseId);
                        this.uploadForm.append("remark",this.myFaulttreamentForm.remark);
                        for(var i=0;i<this.fileList.length;i++){
                            this.uploadForm.append("fileList",this.fileList[i].raw);
                        }

接下来就是使用axios来提交请求了。

FormData的使用说明：[https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using\_FormData\_Objects][https_developer.mozilla.org_zh-CN_docs_Web_API_FormData_Using_FormData_Objects]

axios的介绍：[https://www.kancloud.cn/yunye/axios/234845][https_www.kancloud.cn_yunye_axios_234845]

最后感谢前辈的付出，参考的原文出处：[https://blog.csdn.net/ssp1000/article/details/81105134?utm\_source=blogxgwz9][https_blog.csdn.net_ssp1000_article_details_81105134_utm_source_blogxgwz9]

[https_developer.mozilla.org_zh-CN_docs_Web_API_FormData_Using_FormData_Objects]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
[https_www.kancloud.cn_yunye_axios_234845]: https://www.kancloud.cn/yunye/axios/234845
[https_blog.csdn.net_ssp1000_article_details_81105134_utm_source_blogxgwz9]: https://blog.csdn.net/ssp1000/article/details/81105134?utm_source=blogxgwz9