<el-upload ref="uploadRef" :show-file-list="false" accept=".json" :auto-upload="false"
:on-change="handleOnChange" :on-success="onSuccess" :on-error="onError">
<el-button class="el-button el-button--minor BtnNav-item">快速导入</el-button>
</el-upload>
<el-button class="el-button el-button--minor BtnNav-item" @click="importExcel">导出模型</el-button>
// npm i file-saver
import saveAs from 'file-saver';
// 导出 表格的数据
const importExcel = async () => {
try {
const res: any = await ProductdataModelexport({
modelId: modelId.value,
groupName: groupingModelName.value,
modelPublishedId: RoutecheckState.value == 'unpublished' ? historyIDvalue.value : modelPublishedId.value,
modelVersion: RoutecheckState.value == 'unpublished' ? historyNamevalue.value : modelPublishedVersion.value,
});
// 将数组转换为JSON格式的字符串
const jsonString = JSON.stringify(res, null, 2);
// 创建一个Blob对象
const blob = new Blob([jsonString], { type: 'text/plain;charset=utf-8' });
// 使用FileSaver.js保存Blob对象为txt文件
saveAs(blob, `${productName.value}数据模型.json`);
} catch (error: any) {
throw new Error(error);
}
};
// 导入
const handleOnChange = async (uploadFile: UploadFile | any) => {
try {
const _data = await ProductdataModelimport({
modelId: modelId.value,
productId: ProductID.value,
excelFile: uploadFile.raw
});
if (_data.code == '200') {
ElMessage.success('导入成功');
groupinginfo(false);
} else {
onError()
ElMessage.error(_data.desc);
}
} catch (error: any) {
throw new Error(error);
}
};
const onSuccess = async () => {
const uploadInstance = uploadRef.value;
uploadInstance.clearFiles();
}
const onError = async () => {
const uploadInstance = uploadRef.value;
uploadInstance.clearFiles();
}
大部分朋友都是加上了 limit 这个属性才导致onchange 第二次不触发, 删掉就好啦