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

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

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;//这里是选好的图片的地址，是一个数组
 
 }
})

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

<.>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: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
   sourceType: ['album', 'camera'], // 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:'https://........',//这里是你图片上传的接口
   path:pics//这里是选取的图片的地址数组
  });
 },
 onLoad:function(options){

 }

})

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!