react + pro-components + ts完成单文件上传和批量上传

原创

已于 2024-07-17 17:29:23 修改 · 650 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript #vue.js

于 2024-07-17 17:28:45 首次发布

上传部分使用的是antd中的Upload组件,具体如下:

GradingFilingReportUpload方法是后端已经做好文件流,前端只需要调用接口即可

单文件上传

<Upload
    key={`upload_${record.id}`}
    showUploadList={false}
    accept=".xlsx"
    maxCount={1}
    customRequest={({ file }) => {
        const formData = new FormData();
        formData.append('id', record.id);
        formData.append('ins', file);
        GradingFilingReportUpload(formData).then(res => {
            if (res.state === 200) {
                message.success(res.message);
            } else {
                message.error('上传失败');
            }
        })
    }}
><a >上传</a></Upload>

多文件上传

页面组件

<Upload
    showUploadList={false}
    multiple
    customRequest={({ file, onSuccess, onError }) => {
        handleRequestAllFile([file]).then(() => onSuccess && onSuccess('上传成功')).catch(() => onError)
    }}
>
    <a >批量上传</a>
</Upload>

js逻辑

    const handleRequestAllFile = async (fileList: any[]) => {
        try {
            const formData = new FormData();
            fileList.forEach((file) => {
                formData.append('ins', file);
            })
            const res = await GradingFilingReportUpload(formData);
            if (res.state === 200) {
                message.success('文件上传成功');
            } else {
                message.error('文件上传失败');
            }
        } catch (e) {
            message.error('文件上传过程出错')
        }
    }