ElementUI中Upload组件如何批量上传
首先就是upload组件
<el-uploadclass="upload-demo"ref="uploadFile"name="filedatas":headers="importHeaders":action="uploadAdminHost":auto-upload="false"multiple><el-button slot="trigger" size="small" type="primary">选取博客文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到服务器</el-button></el-upload>
然后是上传逻辑，首先获取到upload组件上的dom，然后获取文件，上传地址和数据
// 文件上传submitUpload() {let {uploadFiles, action, data} = this.$refs.uploadFile this.uploadFiles({uploadFiles,data,action,success: (response) => {console.log(response)// 上传成功后，将里面的内容删除this.$refs.uploadFile.clearFiles();this.$refs.uploadPicture.clearFiles();},error: (error) => {console.log('失败了', error)}})},
下面封装了一个 uploadFiles 方法，这里uploadFiles 就可以是多文件，通过封装ajax方式
/*** 自定义上传文件* @param fileList 文件列表* @param data 上传时附带的额外参数* @param url 上传的URL地址* @param success 成功回调* @param error 失败回调*/uploadFiles({uploadFiles, headers, data, action, success, error}) {let form = new FormData()// 文件对象uploadFiles.map(file => form.append("filedatas", file.raw))// 附件参数for (let key in data) {form.append(key, data[key])}let xhr = new XMLHttpRequest()// 异步请求xhr.open("post", action, true)// 设置请求头xhr.setRequestHeader("Authorization", getToken());xhr.onreadystatechange = function() {if (xhr.readyState == 4){if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){success && success(xhr.responseText)} else {error && error(xhr.status)}}}xhr.send(form)}
最后后台接口，同时接受多个文件
@PostMapping("/pictures")public Object uploadPics(HttpServletRequest request, List<MultipartFile> filedatas) {// 逻辑代码}
最后查看请求，会同时携带多个文件，并且返回多个上传成功的结果
