在 react-native 中发布 formdata 时总是抛出“网络错误”答案

【问题标题】：Always throws "network error" while do formdata post in react-native在 react-native 中发布 formdata 时总是抛出“网络错误”
【发布时间】：2019-10-30 15:06:00
【问题描述】：

在我的 react-native 应用程序中，我想通过 api 上传图像，它在邮递员中工作但不在应用程序中，总是给我“网络错误”

TypeError：网络请求失败在 XMLHttpRequest.xhr.onerror (whatwg-fetch.js:504) 在 XMLHttpRequest.dispatchEvent (event-target.js:172) 在 XMLHttpRequest.setReadyState (XMLHttpRequest.js:580) 在 XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:394) 在 XMLHttpRequest.js:507 在 RCTDeviceEventEmitter.emit (EventEmitter.js:181) 在 MessageQueue.__callFunction (MessageQueue.js:366) 在 MessageQueue.js:106 在 MessageQueue.__guard (MessageQueue.js:314) 在 MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)

profile.js

let formData = new FormData();
 formData.append("file", {
      name: response.fileName,
      uri: response.uri,
      type: response.type
    });

    formData.append("inputString", {
      appversion: "2.0.0",
      mobile: "456456456",
      token: "1ba12dyrty452c4d6cb04544f52fccfc92748f"
    });

    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {
      var percentComplete = Math.ceil((e.loaded / e.total) * 100);
      // here you will get the percentage of upload completed.
    };

    xhr.open("POST", "https://findmysalon.appspot.com/customer/uploadfile");

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        let resp = xhr.response;
        var response = JSON.parse(resp);
        console.log(response);
      } else {
        console.log(xhr.response);
        console.log("error1");
        //Response error
      }
    };

    xhr.onerror = function() {
      //ERROR
      console.log("error2");
    };

    xhr.setRequestHeader("Authorization", "Basic dfgdfgdgddfg"); //eg: `Bearer ${token}`
    xhr.send(formData);

【问题讨论】：

代码中，xhr.setRequestHeader("Authorization", "dfg dfgdfgdfgdfgdfg");你更新了令牌吗？
@JebinBenny 。是的

标签： react-native

【解决方案1】：

尝试将标题写为

  headers: {
    "Authorization", "dfg dfgdfgdfgdfgdfg");
    "content-type", "multipart/form-data");
  },

【讨论】：

【解决方案2】：

您可以使用XMLHttpRequest()

例如：

let formData = new FormData();
let fileName = "image1.png";

formData.append("file", {
  name: fileName,
  uri: img.uri,
  type: "image/png"
});

form.append("inputString", {
  appversion: this.state.appversion,
  mobile: this.state.mobile,
  token: this.state.token
});

var xhr = new XMLHttpRequest();

xhr.upload.onprogress = function(e) {
  var percentComplete = Math.ceil((e.loaded / e.total) * 100);
  // here you will get the percentage of upload completed.
};

xhr.open("POST", "https://fhy.appspot.com/customer/uploadfile");

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    let resp = xhr.response;
    var response = JSON.parse(resp);
    //Response success
  } else {
    //Response error
  }
};

xhr.onerror = function() {
  //ERROR
};

xhr.setRequestHeader("Authorization", "dfg dfgdfgdfgdfgdfg"); //eg: `Bearer ${token}`
xhr.send(formData);

【讨论】：