Wie React Native Fetch zum Hochladen von Bildern verwendet

In diesem Artikel wird der Beispielcode für React Native zur Implementierung des Bild-Uploads vorgestellt. Die Details lauten wie folgt: Gewöhnliche Netzwerkanforderungsparameter sind JSON-Objekte das formData-Objekt

Das Codepaket für die Verwendung von fetch zum Hochladen von Bildern lautet wie folgt:

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);
      });
  });
}

Wie um es zu verwenden

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

Verwandte Empfehlungen:

vue Sharing-Tipps zur Verwendung von Express und Fetch zum Abrufen lokaler JSON-Dateien

React Native verwendet Fetch, um POST-Anfragen senden

Vier Abrufanweisungen in PHP

Das obige ist der detaillierte Inhalt vonWie React Native Fetch zum Hochladen von Bildern verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!