react如何上传多张图片

多彩岁月

于 2024-04-24 18:41:50 发布

阅读量105

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/Edwina_byx/article/details/138166750

版权

本文介绍了使用async函数处理图片上传，确保一次上传一张，以及设置`Content-Type`为multipart/form-data并配置header头的技巧。

摘要由CSDN通过智能技术生成

async function onUpload() {
        console.log(fileList, 96);
        const formData = new FormData();
        if (fileList.length !== 3) {
            toast.error('请上传三张图片');
            return Upload.LIST_IGNORE
        }
        fileList.map((file, index) => {
            formData.append("imageFiles_" + index, file);
        });
        try {
            formData.append("token", userInfo.token);
            setUpLoading(true);
            postRequest(API_APPLY_SUBMIT, formData,
               { headers: {
                // 头信息
                "Content-Type": "multipart/form-data",
            }}
            )
                .then(() => {
                    getUserInfo.refetch();
                    modalContext.show(<UploadSuccessModal onGoHome={() => {
                        modalContext.hidden();
                        getUserInfo.refetch();
                        history.push('/');
                    }} />);
                })
                .finally(() => {
                    setUpLoading(false);
                });
        } catch (error) {
            // console.error("Base64 conversion error:", error);
            // toast.error('图片转换失败，请重新上传');
        }
    }

第一点：注意同时上传多张：应该一张一张传

fileList.map((file, index) => {
            formData.append("imageFiles_" + index, file);
        });

第二点：是formData传输的时候，需要添加header头信息

postRequest(API_APPLY_SUBMIT, formData,
               { headers: {
                // 头信息
                "Content-Type": "multipart/form-data",
            }}
            )