vue3.0 +ts +vantdesginVue 手动上传excel文件( 不使用上传服务器功能,不支持多文件一起上传)
注意点: 必须是post请求 ,
<a-button
type="primary"
style="float: right; margin: 4px 0px 0px 15px"
@click="clickImport"
>批量导入</a-button
>
<!-- 批量导入 -->
<a-modal v-model:visible="importVisible" :maskClosable="false" title="批量导入" width="50%" :afterClose="closeImport">
<div style="width: 80%; margin: 0px auto">
<a-upload-dragger
v-model:fileList="fileList"
name="file"
:remove="handleRemove"
:before-upload="beforeUpload"
>
<p class="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p class="ant-upload-text">将文件拖到此处或点击上传</p>
<p class="ant-upload-hint">只支持excel文件</p>
</a-upload-dragger>
<p :successTip="successTip" style="margin:0px;color:green;">{{successTip}}</p>
<p :failTip="failTip" style="margin:0px;color:red;">{{failTip}}</p>
<a @click="DownImportFile">{{hrefFile}}</a>
</div>
<template #footer>
<a-button @click="closeImport">取消</a-button>
<a-button type="primary" @click="bulkImport" :disabled="fileList.length === 0" :loading="uploading">{{
uploading ? '导入中' : '开始导入'
}}</a-button>
</template>
</a-modal>
// 类型接口
interface FileItem {
uid: string;
name?: string;
status?: string;
response?: string;
url?: string;
preview?: string;
originFileObj?: any;
file: string | Blob;
}
----------------------------定义-----------------------------------
// 批量导入弹窗开关
const importVisible = ref<boolean>(false);
// 上传文件
const fileList = ref<any>([]);
// 导入中
const uploading = ref<boolean>(false);
// 导入到服务器后返回的文件名称
const fileName = ref<string>('')
// 导入成功数量
const successTip = ref<string>('')
// 导入失败数量
const failTip = ref<string>('')
// 下载导入文件地址
const hrefFile = ref<string>('')
// 保存上传文件file
const importFlie=ref<any>()
-------------------方法-------------------------------------------
// 点击批量导入
function clickImport() {
importVisible.value = true;
}
// 移除要导入的文件
function handleRemove(file: FileItem){
const index = fileList.value.indexOf(file);
const newFileList = fileList.value.slice();
newFileList.splice(index, 1);
fileList.value = newFileList;
};
// 导入前
function beforeUpload(file: FileItem) {
importFlie.value = file
fileList.value = [...fileList.value, file];
const isJpgOrPng = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
if (!isJpgOrPng) {
message.error('上传图片文件格式错误!');
nextTick(()=>{
fileList.value=[]
})
}
const isLt10M = file.size / 1024 / 1024 <= 10;
if (!isLt10M) {
message.error('上传的图片必须小于 10MB!');
nextTick(()=>{
fileList.value=[]
})
}
return isJpgOrPng && isLt10M && false;
}
// 点击确定导入
async function bulkImport() {
const formData = new FormData();
formData.append('file',importFlie.value);
formData.append('wellId', props.wellInformation.id);
formData.append('catalogueId', dataObject.value.id);
let res = await dataBaseManagementApi.importInformation(formData);
if(res.success){
uploading.value = false;
fileList.value = []
successTip.value = res.obj?.successMsg;
failTip.value = res.obj?.failedMsg;
hrefFile.value = res.obj?.fileErrName
}else{
uploading.value = false;
fileList.value = []
successTip.value = res.obj?.successMsg;
failTip.value = res.obj?.failedMsg;
hrefFile.value = res.obj?.fileErrName
message.error(res.msg)
}
}
// 下载导入文件
async function DownImportFile(){
await dataManagementApi.downImportErrorFile(props.wellInformation.id,dataObject.value.id,hrefFile.value,dataObject.value.requestUrl);
}
// 关闭导入弹窗
function closeImport(){
importVisible.value=false,
successTip.value = '',
failTip.value = '',
hrefFile.value='',
fileList.value = [];
search('sousuo');// 掉一次查询接口
}