<one-upload
action="#"
:file-list="params.files"
show-limit-count
multiple
:on-remove="uploadRemove"
:before-upload="beforeUpload"
:http-request="httpRequest"
:on-exceed="handleExceed"
/>
<one-button type="primary" @click="onSubmit">确定</one-button>
const params = reactive({
file: [] as any,
});
const handleExceed: UploadProps['onExceed'] = (files: any) => {
console.log(files, 'files');
};
async function httpRequest(files: any) {
params.files.push(files.file);
};
// 删除
const uploadRemove = (uploadFile: any) => {
if (uploadFile?.uid) {
const removeFileId = uploadFile.uid;
params.files.forEach((item: { uid: number; }, i: number) => {
if (item.uid === removeFileId) {
params.files.splice(i, 1);
}
});
}
};
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: { type: string; size: number; }) => {
const validTypes = ['text/plain', 'application/msword',]; // 允许上传的文件类型
if (!validTypes.includes(rawFile.type)) {
ElMessage.error('只允许上传txt、doc格式的文件!');
return false;
}
if (rawFile.size / 1024 / 1024 > 100) {
ElMessage.error('文件大小不能超过100MB!');
return false;
}
return true;
};
async function onSubmit() {
let formData = new FormData() as any;
for (let file of params.file) {
formData.append('file', file);
}
}
网友评论