Partage de cas – téléchargement de groupes d'images de mini-programmes

Dans le processus de développement, plusieurs groupes de photos doivent être téléchargés pour une exigence de projet. Une capture d'écran partielle de la page de téléchargement est la suivante :

Parce qu'il y en a. de nombreux groupes, il est impossible que chaque groupe écrive une mise en page, utilisez donc une boucle for pour sélectionner et afficher les images. Définissez d'abord les données

fileList: [{
      name: "驾驶证",
      cid:"0",
      picimage:[],
    }, {
        name: "整车外观",
        cid: "1",
        picimage: [],
      }, {
        name: "整车铭牌",
        cid: "2",
        picimage: [],
    }, {
        name: "发动机全貌",
        cid: "3",
        picimage: [],
    },{
        name: "增压器全貌",
        cid: "4",
        picimage: [],
    }]

La partie code de mise en page ne sera pas publiée. rencontrés lors de l'utilisation de la boucle sont : 1. Appelez le même wx .chooseImage() affichera le deuxième chapitre couvrant le premier 2. Tous les groupes ne peuvent pas être distingués en même temps ; Solution : 1. Lors de la sélection d’une image, concaténez-la dans le tableau. 2. Définissez un identifiant pour chaque groupe. Lorsque vous cliquez sur le bouton de sélection d'image, l'identifiant est transmis. ChooseImage sélectionne le groupe dans lequel afficher l'image en fonction de l'identifiant reçu :

chooseWxImage: function (e) {
    var _this = this;
    var id = e.currentTarget.dataset.picid;
    console.log("id-----" + id)
    if (_this.data.fileList[id].picimage.length>1){
      wx.showModal({
        content: '你最多只能选择2张照片',
        showCancel:false,
      })
    }else{
    wx.chooseImage({
      count:2,
      sizeType: "compressed",
      sourceType: ['album', 'camera'],
      success: function (res) {
        var arr = _this.data.fileList[id].picimage;
        for (let i in res.tempFilePaths) {
          arr.push(res.tempFilePaths[i])
        }
        _this.setData({
          fileList: _this.data.fileList
        })
      }
    })}
  },

.

Télécharger En partie, étant donné que l'applet ne peut télécharger qu'une seule image à la fois, la méthode de téléchargement doit être traitée. Tout d'abord, placez tous les tableaux d'images dans une collection, puis parcourez la collection pour les télécharger en unités de tableau.

upload: function (e) {
    var that = this;
    var fileList = that.data.fileList;
    var tempath = [] ;//图片地址，将所有图片数组放进去
    for(let i in fileList){
      tempath.push(fileList[i].picimage)
      }
    
    console.log("tempimage"+tempath)
    wx.showLoading({
      title: '上传中...',
    })
      for (let j in tempath) {
        requestUtil.uploadimg({//uploading为封装的一个方法
          url: '上传地址',
          path: tempath[j],//遍历地址，将每个数组循环上传
          })
      wx.hideLoading();
      wx.showToast({
        title: '上传成功！',
        icon:'success',
        duration:'2500',
      })
      }
    }






//多张图片上传，这部分代码是参考网上的，使用当中遇到一个bug就是如果传过来的数组为空的话，就会卡死小程序，因此需要加上判断数组不能为空
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: 'file',//这里根据自己的实际情况改
		formData: data.formData,//这里是上传图片时一起上传的数据
		success: (resp) => {
      if (resp.statusCode == 200) {
        success++;//图片上传成功，图片上传成功的变量+1
			  console.log(resp)
			  console.log(i);
      }
		},
		fail: (res) => {
			fail++;//图片上传失败，图片上传失败的变量+1
      console.log(data.path)
			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);
			}
		}
	});
}

Recommandations associées :

Développement d'applets WeChat et partage d'exemples de fonctions d'image de téléchargement

CodeIgniter partage l'ensemble du processus de téléchargement réussi images

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!