React Native 中的 FormData 抛出空白对象答案

【问题标题】：FormData in React Native throws blank objectReact Native 中的 FormData 抛出空白对象
【发布时间】：2020-07-20 16:25:05
【问题描述】：

在我的 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没有显示数据？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

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

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 );

【讨论】：