使用ElementUI上传组件实现上传后立即自动下载的功能

<el-upload
            ref="checkUploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="checkUpload.headers"
            :action="checkUpload.url"
            :disabled="checkUpload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            :http-request="uploadSectionFile"
            drag
         >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         </el-upload>
         <template #footer>
            <div class="dialog-footer">
               <el-button type="primary" @click="submitFileForm">确 定</el-button>
               <el-button @click="checkUpload.open = false">取 消</el-button>
            </div>
         </template>

import axios from 'axios';
import { saveAs } from 'file-saver';
// 创建axios实例
const request = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

/*** 导入参数 */
const checkUpload = reactive({
  // 是否禁用上传
  isUploading: false,// 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: "/excel/updateExcel"
});


/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["checkUploadRef"].submit();
};


function uploadSectionFile(params){
  const data = new FormData();
              data.append(params.filename, params.file);
              request.post(params.action, data, {
                      headers: { 'Content-Type': 'multipart/form-data' },
                      responseType: 'blob'
                  })
                  .then(resp => {
                    console.log(resp);
                    saveAs(resp.data, params.filename);

                  }).catch(err => {
                      console.log(err);
              }); 

}

 

1. 使用el-upload的http-request属性可以自定义提交上传的方法，改方法会覆盖原本的action。

2. 使用axios向上传接口发送请求，请求头设置为'Content-Type': 'multipart/form-data' ，用于提交文件。

3. responseType设置为'blob' 用于表明接收响应时接收的是blob文件。

4.最后使用file-saver导出blob文件。

 

ps：该样例使用的是vue3，elementPlus，"axios": "0.26.1" ，file-saver": "2.0.5" ，其他组件版本代码也类似。