React Native使用FormData()的Fetch()方法HTTP TypeError: 网络请求失败

9 浏览
0 Comments

React Native使用FormData()的Fetch()方法HTTP TypeError: 网络请求失败

我正在使用FormData()和Fetch()在Android上拍照后将图像文件上传到我的服务器。

我正在使用公共IP地址，而不是上传到本地主机或其他地方，也没有使用HTTPS，同时使用Genymotion模拟器。

我的代码：

var fd = new FormData();
fd.append('image', {path:'file:///'}); 
fetch(UPLOAD_URI,{
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: fd
}).then(response => {
  console.log("image uploaded")
}).catch(err => {
  console.log(err)
})

错误返回在catch中的参数err中：

TypeError: 网络请求失败
  at XMLHttpRequest.xhr.onerror (fetch.js:441)
  at XMLHttpRequest.dispatchEvent (event-target.js:172)
  at XMLHttpRequest.setReadyState (XMLHttpRequest.js:542)
  at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:378)
  at XMLHttpRequest.js:482
  at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
  at MessageQueue.__callFunction (MessageQueue.js:236)
  at MessageQueue.js:108
  at guard (MessageQueue.js:46)
  at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:107)

我是否缺少某种权限，出了什么问题？

谢谢。

0

1 答案

0 Comments

React Native中的Fetch()函数与FormData()函数一起使用时出现了HTTP TypeError: Network request failed错误。这个问题在我的情况下是因为我在Android上使用了Java将文件发送到服务器并使用PHP中的$_FILES进行提取的。为了解决这个问题，我使用了react-native-file-transfer-android这个模块。

首先，我通过以下命令安装了react-native-file-transfer-android模块：

npm install react-native-file-transfer-android

然后，我修改了我的代码如下：

var FileTransfer = require('react-native-file-transfer-android');
const UPLOAD_URI = "http://< IP / Domain>/index.php"
makeUuid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}
sendImageToServer(data){
    var uuid = this.makeUuid();
    FileTransfer.upload({
        uri: data,
        uploadUrl: UPLOAD_URI,
        fileName: 'temp.jpg',
        mimeType: 'image/jpg',
        headers: {
            'Accept': 'application/json'
        },
        data: {
            name:uuid
        }
    }, (err, res) => {
        if(err) {
            console.error(err);
        } else {
            console.log(res);
        }
    });
}
saveImage(imgDate){
    let states = {camera:false};
    states[this.state.ActiveImage] = imgDate.path;
    this.sendImageToServer(imgDate.path);
    this.setState({
        ...states
    });
}

以上就是解决React Native Fetch() with FormData() HTTP TypeError: Network request failed错误的方法。希望对你有帮助。

0