Wie Native Fetch verwendet, um die Funktion zum Hochladen von Bildern zu implementieren

Dieses Mal zeige ich Ihnen, wie Native Fetch verwendet, um die Bild-Upload-Funktion zu implementieren. Welche Vorsichtsmaßnahmen gibt es für die Verwendung von Fetch, um die Bild-Upload-Funktion in Native zu implementieren? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Normales NetzwerkAnfrageparametersind JSON-Objekte

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

Verwenden Sie fetch, um das Bildcodepaket wie folgt hochzuladen:

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, type: 'application/octet-stream', name : Der Typ in 'image.jpg'} kann auch multipart/form-data sein
Das Dateifeld in formData.append("file", file) kann 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 auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie js die A-Z-Sortierung des chinesischen Pinyin implementiert

vue.js verschiebt die Array-Position und aktualisiert es in Echtzeit anzeigen

Vue verarbeitet die Array-Seite über die folgende Tabelle und rendert nicht

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