本文主要是介绍Vue ElementUI中Upload组件批量上传的实现代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使...
ElementUI中Upload组件如何批量上传
首先就是upload组件
<el-upload
class="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 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.$androidrefs.uploadPicture.clearFiles();
},
error: (error) => {
console.log('失败了', error)
}
})
},下面封装了一个 uploadFiles 方法，这里uploadFiles 就可以是多文件，通过封装AJAX方式
/**
* 自定义上传文件
* @param fileList python文件列表
* @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("fiwww.chinasem.cnledatas", file.raw))
// 附件参数
for (let key in data) {
form.append(key, data[key])
}
let xhr = new XMLHttpRequest()
// 异步请求
xhr.open("androidpost", action, true)
// 设置请求头
dnRqwyC 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) {
// 逻辑代码
}最后查看请求，会同时携带多个文件，并且返回多个上传成功的结果
到此这篇关于vue ElementUI中Upload组件如何批量上传的文章就介绍到这了,更多相关Vue ElementUI Upload组件批量上传内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)！
这篇关于Vue ElementUI中Upload组件批量上传的实现代码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
