element-ui文件导入导出功能

导出：导出功能主要是前端获取后端接口，后端接口返回的是文件流格式的数据，前端对文件流进行转换
HTML代码
<el-button @click="outPortData">导出</el-button>
JS代码:outPortData() { outData().then(res => { const filename = res.data.msg; fileDown(filename).then(ress => { const blob = new Blob([ress.data]); const blobUrl = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.style.display = "none"; a.download = "商家数据明细.xlsx"; // 自定义下载的文件名 a.href = blobUrl; a.click(); // }; }); }); }
导入：导入功能运用了el-load组件，前端传输一个文件格式，后端接收一个文件格式。
Html代码：<el-upload action="" :on-change="handleChange" :http-request="uploadFile" ref="upload" show-file-list="false" style="display: inline-block" > <el-button type="primary" class="upload-style" style="margin-left: 10px; margin-right: 10px;" >导入</el-button > </el-upload>
JS代码：uploadFile(param) { let form = new FormData(); form.append("file", param.file); form.append("updateSupport", true); importData(form).then(res => { console.log(res); }); },
接口需要携带:headers: { "Content-Type": "multipart/form-data" }