Question

我目前正在Android的React Native 0.62.2中构建一个简单的应用程序。尝试将图像上传到我的API（以axios 0.19.2 / fetch编写）时，我在使用node.js（甚至是express API）时遇到了一些麻烦。 POST请求的格式如下：

// UserService.js
export const postNewUser = async (newUser) => {
    try {
        const photo = {
            uri: newUser.avatar.uri,
            type: 'image/jpg',
            name: newUser.avatar.fileName,
        };
        const formData = new FormData();
        Object.keys(newUser).forEach(key => formData.append(key, newUser[key]));
        formData.append('avatar', photo);
        const response = await api.post('/users', formData);

        return response.data;
    } catch (err) {
        console.log('TRACE error posting user: ', err);
        return;
    }
}

在这里，属性newUser.avatar.uri是通过图像选择器库@react-native-image-picker 1.6.1设置的。每当我将NetworkError变量附加到photo时，它就会给我一个FormData。使用来自网络的一些随机图像手动设置URI会导致相同的错误。从浏览器中对其进行调试，它会打印出某种堆栈跟踪，如下所示：

TRACE error posting user:  Error: Network Error
    at createError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\core\createError.js:16)
    at EventTarget.handleError (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\axios\lib\adapters\xhr.js:83)
    at EventTarget.dispatchEvent (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\event-target-shim\dist\event-target-shim.js:818)
    at EventTarget.setReadyState (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
    at EventTarget.__didCompleteResponse (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
    at RCTDeviceEventEmitter.emit (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
    at MessageQueue.__callFunction (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
    at C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
    at MessageQueue.__guard (C:\Users\Dell\Documents\Projetos\SmartestVet\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)

例如，如果我注释掉formData.append('avatar', photo);行，则它可以正常工作，即我的API相应地接收到该请求。因此，我认为这可能不是与CORS相关的问题。另外，其他请求（例如GET甚至其他POST）也可以正常工作。

我知道SO和GitHub中还有很多其他相关文章，其中一些与完全相同的问题有关。但是我发现没有一种解决方案对我有用。

万一有人想看看我的API中的路由是如何实现的，请打我一下，我将在此处提供代码。

在此先感谢您为我提供的帮助！

Answer 1

我遇到了同样的问题，使用formData，但是没有文件上传就可以了。我做了很多研究，发现old issue仍然在react native仓库中很活跃。建议的解决方案是使用名为rn-fetch-blob的库，但我不能在我的项目中实现它。如果可以工作，请与周围分享您的工作。

在将图像添加到React Native中的FormData结构中时，Axios POST请求给出“网络错误”

1 个答案: