elementui中同时上传多个文件_Element ui中upload组件一次请求批量上传
Element ui是由饿了么团队推出的基于vue的前端库,功能非常强大,其中的upload组件可以轻松的实现前端通过点击或者拖拽上传文件。不过upload组件默认的批量上传却是逐项上传,也就是你一次批量选择5个文件,那么会发送5次请求来分别上传这5个文件。那么Element ui中upload组件怎么实现一次请求批量上传呢?这就需要通过自定义http-request来覆盖默认的上传行为,实现自定
Element ui是由饿了么团队推出的基于vue的前端库,功能非常强大,其中的upload组件可以轻松的实现前端通过点击或者拖拽上传文件。不过upload组件默认的批量上传却是逐项上传,也就是你一次批量选择5个文件,那么会发送5次请求来分别上传这5个文件。
那么Element ui中upload组件怎么实现一次请求批量上传呢?这就需要通过自定义http-request来覆盖默认的上传行为,实现自定义上传,具体代码如下:
选取文件 上传到服务器
代码说明:
1.配置自定义的http-request函数:
:http-request="customUpload"
2.在data中添加一项参数:fileData,类型是FormData:
fileData: new FormData()
3.实现customUpload方法,将上传文件信息拼接到fileData中。
customUpload(file) { this.fileData.append('files[]', file.file) return false }
4.定义axios异步上传方法:
export function fileUpload(file) { return request({ method: 'post', url: 'http://localhost/api/import', headers: {'Content-Type':'multipart/form-data'}, data: file }) }
5.在submitUpload中调用4中定义的上传方法:
submitUpload() { this.$refs.upload.submit(); fileUpload(this.fileData).then(response => { //console.log(response) }) },
更多推荐
所有评论(0)