Element ui中upload组件一次请求批量上传

小Z 2019-10-17 19:50 主机之家测评 | 隐藏边栏 | 抢沙发 | 497 0

文章评分 0 次，平均分 0.0 ：

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)    })  },

声明：1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。