<el-upload
ref="upload"
style="width: 100%"
v-model:file-list="fileList"
class="m-l-10"
action="#"
multiple
:limit="1"
:on-exceed="handleExceed"
:http-request="()=>getImportExcel()"
:before-upload="beforeUpload"
accept=".zip,.rar,.xls,.xlsx,.doc,.docx,.pdf"
>
<el-button type="primary" icon="EditPen">上传</el-button>
<span class="c-red">(仅支持.zip,.rar,.xls,.xlsx,.doc,docx,.pdf格式的文件)</span>
</el-upload>
const fileList = ref<UploadUserFile[]>([])
const beforeUpload = (file) => {
const allowedTypes = ['application/x-zip-compressed', 'application/x-compressed', 'application/vnd.ms-excel',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/pdf'];
const isValidFileType = allowedTypes.includes(file.type);
if (!isValidFileType) {
// 文件类型不符合要求
ElMessage.error('只能上传 .zip, .rar, .xls, .xlsx, .doc, .docx, .pdf 类型的文件');
return false; // 返回 false 可以阻止文件上传
}
return true; // 返回 true 允许文件上传
};
const handleExceed: UploadProps['onExceed'] = (files) => {
upload.value!.clearFiles()
const fileUrl = files[0] as UploadRawFile
file.value = fileUrl
// console.log(file.value,'更换文件的')
fileUrl.uid = genFileId()
upload.value!.handleStart(fileUrl)
}
const getImportExcel = ()=>{
file.value = fileList.value[0].raw
// console.log(file.value,'不更换文件只提交的')
}
const file = ref<any>() 这个是 存放文件流的变量
这里要注意一下接口定义的方式 是 formData
export const terminalRecordUpload = async (formDataParams: any) => {
const formData = new FormData();
for (const key in formDataParams) {
if (Object.prototype.hasOwnProperty.call(formDataParams, key)) {
formData.append(key, formDataParams[key]);
}
}
return await request<ApiResponseData<any>>({
method: 'post',
url: `接口地址`,
data: formData,
headers: {
'Content-Type': 'multipart/form-data', // 设置表单数据的 Content-Type
},
});
};