首页 > 解决方案 > React Native 中的 FormData 抛出空白对象

问题描述

在我的 React Native 项目中,我react-native-image-picker用于图像上传。在这里,我使用 formData 上传图片。图像 URL 在那里,但是当我控制台 formData 它显示 {}。我不知道为什么会这样。这是代码:

    uploadImageAsync = async (imgUri, token) => {

        let apiUrl = 'url';
        let formData = new FormData();

        let uriParts = imgUri.split('.');
        let fileType = uriParts[uriParts.length - 1];

        //generate some random number for the filename
        var randNumber1 = Math.floor(Math.random() * 100);
        var randNumber2 = Math.floor(Math.random() * 100);

         formData.append('image', {
            uri: imgUri,
            name: `photo-${randNumber1}-${randNumber2}.${fileType}`,
            type: `image/${fileType}`,
         });

        console.log('formData :', formData);

        let options = {
            method: 'POST',
            body: formData,
            headers: {
                Accept: 'application/json',
                Authorization: 'Bearer ' + token,
                'Content-Type': 'multipart/form-data',
                'Cache-Control': 'no-cache',
            },
        };

        const response = await fetch(apiUrl, options);
        const json = await response.json();
 
    }
    };

formData 的控制台不显示任何数据,但imgUri包含图像路径。为什么 formData 没有显示数据?

标签: javascriptreact-native

解决方案


FormData.append()value属性可以是 a或 a 。因此,您可以尝试对对象进行字符串化,然后选择性地解析字符串数据。USVStringBlob

const imageData = {
    uri: imgUri,
    name: `photo-${randNumber1}-${randNumber2}.${fileType}`,
    type: `image/${fileType}`,
};

const formData = new FormData();
formData.append("image", JSON.stringify(imageData));

const formImageData = formData.get("image");
const parsedFormImageData = JSON.parse(formImageData);

console.log(parsedFormImageData );

推荐阅读