美文网首页
element-plus upload FormData上传多个

element-plus upload FormData上传多个

作者: 人间四月天i | 来源:发表于2023-12-13 16:58 被阅读0次
<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);
  }
}

相关文章

网友评论

      本文标题:element-plus upload FormData上传多个

      本文链接:https://www.haomeiwen.com/subject/mnabgdtx.html