无法上载React Native上具有FormData的文件

6l7fqoea  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(156)

我无法将带有FormData的文件上载到React Native。我使用的是react-native-document-picker,代码如下:

try {
    const pickerResult = await DocumentPicker.pickSingle({
        presentationStyle: 'fullScreen',
        copyTo: 'documentDirectory',
        type: [DocumentPicker.types.pdf],
        mode: 'import',
    });
    setAccountStatement(pickerResult);
    let data = new FormData();
    data.append('file', {
        uri: pickerResult.fileCopyUri,
        type: pickerResult.type,
        name: pickerResult.name,
        fileName: pickerResult.name,
        size: pickerResult.size,
    });
    console.log(data);
    http
        .post('url', data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        })
        .then(response => {
            console.log(response);
        })
        .catch(error => {
            console.log(error);
        });
    }
};

下面是我从react-native-document-picker获得的示例响应

{
    "fileCopyUri": "file:///data/user/0/com.crust/files/497ed9ec-79fb-4bfb-81d1-74907f851c08/receipt_20220929065209.pdf", 
    "name": "receipt_20220929065209.pdf", 
    "size": 36036, 
    "type": "application/pdf", 
    "uri": "content://com.android.providers.media.documents/document/document%3A223934"
}

求你了我该怎么做我...
错误:请求失败,状态代码为415
我不知道我做错了什么。

kxxlusnw

kxxlusnw1#

所以我设法解决了这个问题后,2天不知疲倦地试图弄清楚,我设法有两个不同的解决方案的问题

1.使用提取API

const fd = new FormData();
      fd.append('file', {
        uri: pickerResult.fileCopyUri,
        type: pickerResult.type,
        name: pickerResult.name,
        fileName: pickerResult.name,
        size: pickerResult.size,
      });

       try {
           const res = await fetch(
             'url',
             {
               method: 'POST',
               mode: 'no-cors',
               headers: {
                 Authorization: `Bearer ${token}`,
                 'Content-Type': 'multipart/form-data',
               },
               body: fd,
             },
           );
           console.log(res.status, res.statusText);
           if (res.ok) {
             console.log('Success');
           } else {
             console.log(await res.json());
           }
         } catch (error) {
           console.error(error);
         }

2.将Axios降级到“^0.24.0”

在我使用fetchapi弄清楚之后,我能够做更深入的研究,并发现,
axios在版本“^0.25.0”中的FormData()对象有问题
,所以我
将我的axios版本降级到“^0.24.0”
它的工作就像一个魅力,包括图像上传使用“FormData()”

相关问题