Informationen zur Verwendung von fetch zum Hochladen von Bildern in React Native (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von fetch zum Hochladen von Bildern in React Native vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

In diesem Artikel wird der Beispielcode für React Native zum Hochladen von Bildern vorgestellt. Ich möchte ihn mit Ihnen teilen. Die Details lauten wie folgt:

Gewöhnliche Netzwerkanfrage Parameter sind JSON-Objekte

Die Anforderungsparameter für das Hochladen von Bildern verwenden das formData-Objekt

Die Verwendung von fetch zum Hochladen des Bildcodes 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);
      });
  });
}

Verwendung

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 Hintergrundserverkonfigurationen ,
let file = {uri: params.path, The type in type: 'application/octet-stream', name: 'image.jpg'} kann auch multipart/form-data sein
Das Dateifeld in formData.append("file", file) können auch Bilder sein

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

JQuery-Methode für ausgewählte Werte der ausgewählten Komponente

$set und Array in vue.js Method_vue aktualisieren .js

Vue und vue-i18n werden kombiniert, um eine mehrsprachige Umschaltmethode für Hintergrunddaten zu implementieren

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von fetch zum Hochladen von Bildern in React Native (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!