Axios POST 请求在 React Native 中将图像添加到 FormData 结构时给出"Network Error"

Question

我目前正在为Android构建一个简单的React Native 0.62.2应用程序。当我试图将图像上传到API(用node.js/express编写(时，axios 0.19.2(甚至fetchAPI(遇到了一些问题。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来设置的。每当我将photo变量附加到FormData中时，它都会给我一个NetworkError。使用来自web的一些随机图像手动设置URI会导致相同的错误。从浏览器中注销它，它会打印出一些堆栈跟踪，如以下所示：

TRACE error posting user:  Error: Network Error
at createError (C:UsersDellDocumentsProjetosSmartestVetnode_modulesaxioslibcorecreateError.js:16)
at EventTarget.handleError (C:UsersDellDocumentsProjetosSmartestVetnode_modulesaxioslibadaptersxhr.js:83)
at EventTarget.dispatchEvent (C:UsersDellDocumentsProjetosSmartestVetnode_modulesevent-target-shimdistevent-target-shim.js:818)
at EventTarget.setReadyState (C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesNetworkXMLHttpRequest.js:575)
at EventTarget.__didCompleteResponse (C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesNetworkXMLHttpRequest.js:389)
at C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesNetworkXMLHttpRequest.js:502
at RCTDeviceEventEmitter.emit (C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesvendoremitterEventEmitter.js:189)
at MessageQueue.__callFunction (C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:425)
at C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:112
at MessageQueue.__guard (C:UsersDellDocumentsProjetosSmartestVetnode_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:373)

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

我知道在SO和GitHub中还有很多其他相关的帖子，其中一些与完全相同的问题有关。但我找到的解决方案都不适合我

如果有人想看看我的API中的路由是如何实现的，我会在这里提供代码。

提前感谢你给我的任何帮助！

Answer 1

我也遇到了同样的问题，使用formData，但没有上传文件，效果很好。我做了很多研究，发现一个老问题仍然活跃在react原生回购中。建议的解决方案是使用一个名为rn fetch blob的库，但我无法在我的项目中实现它。如果你能让它发挥作用，请分享你的工作。