导入文件,返回流的话就下载excel文件,返回json数据就把数据放在表格中
温馨提示:FDAPP_HOST是本公司配置,actionUrl是本公司接口,如若使用该方法需要替换掉哦
xmflid也是本人导入文件需要上传的参数,具体问题具体修改哦,本人只为记录工作中遇到的一些问题
功能介绍: 通过选择样本大类,动态获取表头,通过导入文件获取表格数据,如果导入文件里面的数据填写有问题(未按规则填写,比如是否采样(01:是,02:否)要填写数字,不能填写汉字),会返回流,直接下载错误文件,如果返回数组对象则填入表格中
样本大类下拉
<el-form-item label="样本大类" prop="ybdl">
<el-select v-model="form.ybdl" placeholder="请选择" clearable @change="changeYbdlList(form.ybdl)">
<el-option
v-for="item in ybdlData"
:key="item.dicCode"
:label="item.dicName"
:value="item.dicCode"
>
</el-option>
</el-select>
</el-form-item>
上传文件
<el-upload
style="display: inline-block;"
:headers="headers"
action="String"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:on-error="handleError"
:http-request="uploadSectionFile"
:show-file-list="false"
multiple
ref="upload"
>
<el-button type="primary"> 导入文件</el-button>
</el-upload>
动态表格
<ez-table
:data="tableData.result"
:header-cell-style="{ background: '#F5F7FA' }"
stripe
style="width: 100%"
>
<ez-table-column
v-for="(it,index) in tableData.listKey"
:key="index"
:prop="it.colkey"
:label="it.colname"
align="center">
</ez-table-column>
</ez-table>
import { FDAPP_HOST } from '@utils/constant';
import { inspectionManApi } from '../../request/inspectionMan.js';
data() {
return {
form:{
slkscode: '',
ybdl: ''
},
fileType: '',
headers: {
backdoor: true,
},
actionUrl: 'sjsqgl/yjsjsq/upload',
fdappHost: FDAPP_HOST,
xmflid: '', // 上传文件需要上传的样本大类,参数
tableData: {
result: [],
listKey: []
},
ybdlData: [],
}
}
// 获取样本大类, 可以根据选择科室切换样本大类数据
getYbdlList(){
inspectionManApi.getSampleList({ kscode: this.form.slkscode }).then(res => {
this.ybdlData = res;
});
},
// 根据样本大类查询表头
changeYbdlList(val){
this.xmflid = val;
inspectionManApi.getSampleTitle(val).then(res => {
let listKey = res;
// 只展示接口返回数据中ishide等于0的
this.tableData.listKey = listKey.filter(col => col.ishide == '0' );
this.tableData.result = [];
});
},
// 导入文件
handleRemove(file, fileList) {
console.log(file, fileList,'handleRemove');
},
handlePreview(file) {
console.log(file,'handlePreview');
},
beforeAvatarUpload(file) {
this.fileType = file.type;
if (
// .xlsx
file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
// .xls
file.type == 'application/vnd.ms-excel' ||
// .xlsm
file.type == 'application/vnd.ms-excel.sheet.macroEnabled.12'
)
{
// this.$message({
// showClose:true,
// message:'上传成功',
// type:'success'
// });
}
else {
this.$message({
showClose: true,
message: '请上传 Excel 格式的文件',
type: 'warning',
});
return false;
}
},
handleError(err){
err = err.toString();
let errorInfo =err.substring(6,err.length);
errorInfo = JSON.parse(errorInfo);
if(errorInfo){
if(errorInfo.status!=200){
this.fullscreenLoading = false;
this.$message({
message: errorInfo.message,
type: 'warning'
});
return;
}
}
},
uploadSectionFile(params){
const _file = params.file;
// 通过 FormData 对象上传文件
var formData = new FormData();
formData.append('file', _file);
formData.append('xmflid', this.xmflid);
formData.append('responseType', 'blob');
// 请求路径
let url = `${FDAPP_HOST}${this.actionUrl}`;
this.uploadExcel(url, formData).then(async (res) => {
// 成功res是'true' 失败是blob类型
if (res[0] == 'true') {
this.$message({
message:'文件导入成功',
type:'success',
duration:3000
});
this.tableData.result = res[1];
} else {
try {
// await this.$confirm('导入文件内容错误,是否下载错误文件!', '提示', {
// confirmButtonText: '出错附件下载',
// cancelButtonText: '关闭',
// type: 'warning',
// });
// 下载出错附件
const fileName = '样本信息导入错误文件.xls';
const blob = new Blob([res], {
type: 'application/vnd.ms-excel',
});
if (window.navigator.msSaveOrOpenBlob) {
console.log('if');
navigator.msSaveBlob(blob, fileName);
} else {
console.log('blob==',blob);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
console.log('window.URL.createObjectURL(blob)1111==',window.URL.createObjectURL(blob));
link.download = fileName;
link.click();
// 释放内存
window.URL.revokeObjectURL(link.href);
}
} catch (e) {
this.$message.info('操作取消');
}
}
});
},
uploadExcel(url, formData) {
return new Promise((resolve, reject) => {
post(url, {
data:formData,
responseType: 'blob',
headers: {
backdoor: 1,
},
}).then(
async res => {
// eslint-disable-next-line require-jsdoc
function blobToBase64 (res) {
var blob = new Blob([res], { type: 'application/json' });
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
// console.log(e.target.result, '88///');
resolve(e.target.result);
};
fileReader.readAsText(blob);
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'));
};
});
};
let isSuccess = await blobToBase64(res);
try{
const resData = JSON.parse(isSuccess);
// console.log(resData);
resolve(['true',resData]);
}catch(e){
// 导入失败返回流
resolve(res);
}
},
(err) => {
reject(err);
});
});
},