【性价之王】	【线路之王】	【价格之王】	【配置之王】
【免费之王】	【香港首推】	【梯子之王】	【独服之王】

Element ui 是由饿了么团队推出的基于 vue 的前端库，功能非常强大，其中的 upload 组件可以轻松的实现前端通过点击或者拖拽上传文件。不过 upload 组件默认的批量上传却是逐项上传，也就是你一次批量选择 5 个文件，那么会发送 5 次请求来分别上传这 5 个文件。

那么 Element ui 中 upload 组件怎么实现一次请求批量上传呢？这就需要通过自定义 http-request 来覆盖默认的上传行为，实现自定义上传，具体代码如下：

<template>   <d2-container> <el-upload    class="upload-demo"    ="upload"     action=""     :http-request="customUpload"     :before-upload="beforeFileUpload"    :on-preview="handlePreview"    :on-remove="handleRemove"     :on-success="handleSuccess"    :file-list="fileList"    :auto-upload="false"     accept=".dbf"     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>    <!--div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>--> </el-upload>   </d2-container> </template> <script>   export default {     data() {       return {         fileList: [],         fileData: new FormData()       };     },     methods: {       submitUpload() {         this.$s.upload.submit();         fileUpload(this.fileData).then(response => {         })       },       beforeFileUpload(file){         let extension=file.name.substring(file.name.lastIndexOf('.')+1);         const isDbf = extension === "dbf";         const isLt10M = file.size / 1024 / 1024 < 10         if (!isDbf) {           this.$message.error('上传的数据文件只能是 dbf 格式!');         }         if (!isLt10M) {           this.$message.error('上传的单个数据文件大小不能超过 10MB!');         }         return isDbf && isLt10M;       },             handleRemove(file, fileList) {       },       handlePreview(file) {       },       handleSuccess(response,file, fileList) {         this.$message.success('上传成功')       },       customUpload(file) {         this.fileData.append('files[]', file.file)         return false       }     }   }   //引入 axios   import request from '@/plugin/axios'   export function fileUpload(file) {     return request({       method: 'post',       url: 'http://localhost/api/import',       headers: {'Content-Type':'multipart/form-data'},       data: file     })   } </script>

代码说明：

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.$s.upload.submit();   fileUpload(this.fileData).then(response => {   //console.log(response)   }) },