Comment Native utilise fetch pour implémenter la fonction de téléchargement d'images

Cette fois, je vais vous montrer comment Native utilise fetch pour implémenter la fonction de téléchargement image Quelles sont les précautions pour utiliser fetch pour implémenter la fonction de téléchargement d'image dans Native. . Ce qui suit est un cas pratique, jetons un coup d'œil.

Réseau normalLes paramètres de requête sont des objets JSON

Le paramètre de requête pour le téléchargement d'images utilise l'objet formData

Utilisez fetch pour télécharger le package de code image comme suit :

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

Utilisation

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=>{ 
     //请求失败
  })

Remarque : En raison des différentes configurations du serveur en arrière-plan,
laissez file = {uri: params.path, tapez : 'application/octet-stream', name : Le type dans 'image.jpg'} peut également être multipart/form-data
Le champ de fichier dans formData.append("file", file) peut également être des images ​ ​  

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment js implémente le tri A-Z du pinyin chinois

vue.js déplace la position du tableau et met à jour en temps réel View

Vue gère la page du tableau à travers le tableau suivant et ne rend pas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!