Maison > Applet WeChat > Développement de mini-programmes > Implémentation de la fonction de téléchargement de plusieurs images dans l'applet WeChat

Implémentation de la fonction de téléchargement de plusieurs images dans l'applet WeChat

不言
Libérer: 2018-06-23 11:49:23
original
8714 Les gens l'ont consulté

Cet article présente principalement en détail la fonction de téléchargement de plusieurs images dans l'applet WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'applet WeChat télécharge des images à chaque fois. Vous ne pouvez en télécharger qu'une seule. photo, tant d'amis vous demanderont que faire si vous souhaitez télécharger plusieurs photos ?

Tout d'abord, jetons un coup d'œil aux deux API wx.chooseImage(object) et wx.uploadFile(OBJECT)

L'exemple de code est le suivant :

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths
 wx.uploadFile({
  url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
  filePath: tempFilePaths[0],
  name: 'file',
  formData:{
  'user': 'test'
  },
  success: function(res){
  var data = res.data
  //do something
  }
 })
 }
})
Copier après la connexion

L'exemple de code ici consiste à sélectionner l'image, puis à télécharger la première image sélectionnée ;

Écrivons maintenant un exemple de téléchargement de plusieurs images

Tout d'abord, nous devons encore sélectionner des images

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组
 
 }
})
Copier après la connexion

Ensuite, écrivez une méthode pour télécharger plusieurs images dans app.js et introduisez-la plus tard. Vous pouvez également l'écrire dans un fichier JS et l'introduire plus tard :

 //多张图片上传
 function uploadimg(data){
  var that=this,
   i=data.i?data.i:0,
   success=data.success?data.success:0,
   fail=data.fail?data.fail:0;
  wx.uploadFile({
   url: data.url, 
   filePath: data.path[i],
   name: 'fileData',
   formData:null,
   success: (resp) => {
    success++;
    console.log(resp)
    console.log(i);
    //这里可能有BUG,失败也会执行这里
   },
   fail: (res) => {
    fail++;
    console.log('fail:'+i+"fail:"+fail);
   },
   complete: () => {
    console.log(i);
    i++;
   if(i==data.path.length){ //当图片传完时,停止调用   
    console.log('执行完毕');
    console.log('成功:'+success+" 失败:"+fail);
   }else{//若图片还没有传完,则继续调用函数
    console.log(i);
    data.i=i;
    data.success=success;
    data.fail=fail;
    that.uploadimg(data);
   }
    
   }
  });
 }
Copier après la connexion

<. 🎜>La méthode pour télécharger plusieurs photos a été écrite Voici la citation :

var app=getApp();
Page({
 data:{
  pics:[]
 },
 choose:function(){//这里是选取图片的方法
  var that=this;
  wx.chooseImage({
   count: 9-pic.length, // 最多可以选择的图片张数,默认9
   sizeType: [&#39;original&#39;, &#39;compressed&#39;], // original 原图,compressed 压缩图,默认二者都有
   sourceType: [&#39;album&#39;, &#39;camera&#39;], // album 从相册选图,camera 使用相机,默认二者都有
   success: function(res){
   var imgsrc=res.tempFilePaths; 
   that.setData({
    pics:imgsrc
   });
  },
  fail: function() {
  // fail
  },
  complete: function() {
  // complete
  }
 })

 },
 uploadimg:function(){//这里触发图片上传的方法
  var pics=this.data.pics;
  app.uploadimg({
   url:&#39;https://........&#39;,//这里是你图片上传的接口
   path:pics//这里是选取的图片的地址数组
  });
 },
 onLoad:function(options){

 }

})
Copier après la connexion

Terminé.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment obtenir le numéro de téléphone mobile de l'utilisateur via l'applet WeChat

À propos du téléchargement d'images par l'applet WeChat au serveur Le code pour

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!

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