使用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" ,其他组件版本代码也类似。