React Native verwendet Fetch, um Bilder hochzuladen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Fetch in React Native zum Hochladen von Bildern vorstellen.

Normales Netzwerk

Anforderungsparameter ist ein JSON-Objekt

Der Anforderungsparameter für das Hochladen von Bildern verwendet das formData-Objekt

Der Code zum Hochladen von Bildern mit fetch ist wie folgt gekapselt:

let common_url = 'http://192.168.1.1:8080/'; //服务器地址
let token = '';  //用户登陆后返回的token
/** 
 * 使用fetch实现图片上传
 * @param {string} url 接口地址
 * @param {JSON} params body的请求参数
 * @return 返回Promise 
 */
function uploadImage(url,params){
  return new Promise(function (resolve, reject) {
    let formData = new FormData();
    for (var key in params){
      formData.append(key, params[key]);
    }
    let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
    formData.append("file", file);
    fetch(common_url + url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data;charset=utf-8',
        "x-access-token": token,
      },
      body: formData,
    }).then((response) => response.json())
      .then((responseData)=> {
        console.log('uploadImage', responseData);
        resolve(responseData);
      })
      .catch((err)=> {
        console.log('err', err);
        reject(err);
      });
  });
}

Gebrauchsanweisung

let params = {
  userId:'abc12345',  //用户id
  path:'file:///storage/emulated/0/Pictures/image.jpg'  //本地文件地址
}
uploadImage('app/uploadFile',params )
  .then( res=>{
    //请求成功
    if(res.header.statusCode == 'success'){
      //这里设定服务器返回的header中statusCode为success时数据返回成功
      upLoadImgUrl = res.body.imgurl; //服务器返回的地址
    }else{
       //服务器返回异常，设定服务器返回的异常信息保存在 header.msgArray[0].desc
      console.log(res.header.msgArray[0].desc);
    }
  }).catch( err=>{ 
     //请求失败
  })

Hinweis: Aufgrund unterschiedlicher Hintergrundserver Konfigurationen,

let The type in file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'} kann auch multipart/form-data
formData.append sein („Datei“, Datei) im Dateifeld können auch Bilder sein

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

Mehrere Möglichkeiten, dies an Reaktionsereignisse zu binden

So verwenden Sie Zeichen in String.prototype. format String splicing

Detaillierte Erläuterung der impliziten Typkonvertierung in JS

So verwenden Sie den $http-Dienst in Angular

Das obige ist der detaillierte Inhalt vonReact Native verwendet Fetch, um Bilder hochzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!