vue+axios+formdata上传文件

通过input file触发上传框

<input type="file" ref="upload" style="display:none;" accept=".xlsx" @change="uploadChange">
 <button @click="importTemplate">模板导入</button>

按钮触发input点击事件

importTemplate() {
    this.$refs.upload.click();
}

对axios进行接口的二次封装

async BatchExportExcel(data){
    return promise(axios.post('/xxx/xxx',data,{
      headers: {
        "Content-Type": "multipart/form-data"
      }
    }))
  }

监听input file上传文件

uploadChange(e) {
    let file = e.target.file;
    if(!file) return 
    // new 一个formdata对象
    let form = new FormData();
    form.append(file,'file');
    // 请求
    api.BatchExportExcel(form).then(res => {
        console.log(res,上传成功);
        //如果可以重复上传记得清空value值
        e.target.value = ''
    }）
}