Maison > interface Web > js tutoriel > le corps du texte

À propos de l'utilisation de fetch pour télécharger des images dans React Native (tutoriel détaillé)

亚连
Libérer: 2018-06-01 09:11:45
original
2049 Les gens l'ont consulté

Cet article présente principalement l'exemple de code d'utilisation de fetch pour télécharger des images dans React Native. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente l'exemple de code permettant à React Native d'utiliser fetch pour télécharger des images, et j'aimerais le partager avec vous. Les détails sont les suivants :

Demande de réseau ordinaire. les paramètres sont des objets JSON

Les paramètres de demande de téléchargement d'image utilisent l'objet formData

Le code de téléchargement d'image utilisant fetch est encapsulé 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);
      });
  });
}
Copier après la connexion

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=>{ 
     //请求失败
  })
Copier après la connexion

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Méthode de valeur sélectionnée JQuery du composant sélectionné

$set et tableau dans vue.js Mise à jour de method_vue .js

Vue et vue-i18n sont combinés pour implémenter une méthode de commutation multilingue des données d'arrière-plan

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!