Comment React Native utilise fetch pour télécharger des images

Cet article présente l'exemple de code permettant à React Native d'utiliser fetch pour implémenter le téléchargement d'images. Je voudrais le partager avec vous. Les détails sont les suivants : Les paramètres de requête réseau ordinaires sont des objets JSON. l'objet formData

Le package de code pour utiliser fetch pour télécharger des images est le suivant :

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

Comment pour l'utiliser

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, tapez
let file = {uri: params.path, tapez : 'application/octet-stream', nom : 'image.jpg'} peut aussi être C'est le champ de fichier dans multipart/form-data
formData.append("file", file) ou il peut s'agir d'images

Recommandations associées :

vue Conseils de partage sur l'utilisation d'Express et fetch pour obtenir des fichiers json locaux

React Native utilise Fetch pour envoyer des requêtes POST

Quatre instructions de récupération en php

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!