微信小程序中多图片上传的效果如何做？

发布时间：2022-11-17 11:10:02 所属栏目：语言来源：

导读：　　这篇文章给大家分享的是微信小程序中多图片上传效果的实现。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　Page({
　　
　　 /

　　这篇文章给大家分享的是微信小程序中多图片上传效果的实现。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。
　　
　　Page({
　　
　　 /**
　　 * 页面的初始数据
　　 */
　　 data: {
　　 pics: [],
　　 count: 9, //上传图片最大数量
　　 // showImgUrl: "", //路径拼接，一般上传返回的都是文件名，
　　 uploadImgUrl: 'https://xxx/UploadHandler.ashx', //图片的上传的路径
　　 detailPics: [], //上传的结果图片集合
　　 },
　　 selectimages() {
　　 var that = this;
　　 var detailPics = that.data.detailPics;
　　 if (detailPics.length >= that.data.count) {
　　   wx.showToast({
　　    title: '最多选择' + that.data.count + '张！',
　　   })
　　   return;
　　 }
　　 wx.chooseImage({
　　   count: that.data.count, // 最多可以选择的图片张数，默认9
　　   sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
　　   sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
　　   success: function(res) {
　　    var imgs = res.tempFilePaths;
　　    for (var i = 0; i < imgs.length; i++) {
　　     that.data.pics.push(imgs[i])
　　    }
　　    that.setData({
　　     pics: that.data.pics
　　    })
　　    console.log(that.data.pics)
　　     that.uploadimg({
　　     url: that.data.uploadImgUrl, //这里是你图片上传的接口
　　     path: that.data.pics, //这里是选取的图片的地址数组
　　    });
　　   },
　　 })
　　 },
　　 //多张图片上传
　　 uploadimg: function(data) {
　　 wx.showLoading({
　　   title: '上传图片中...',
　　   mask: true,
　　 })
　　 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) => {
　　    wx.hideLoading();
　　    success++;
　　    var str = resp.data //返回的结果，可能不同项目结果不一样
　　    var pic = JSON.parse(str);
　　    var pic_name = pic.url;
　　    var detailPics = that.data.detailPics;
　　    detailPics.push(pic_name)
　　    that.setData({
　　     detailPics: detailPics
　　    })
　　   },
　　   fail: (res) => {
　　    fail++;
　　    console.log('fail:' + i + "fail:" + fail);
　　   },
　　   complete: () => {
　　    i++;
　　    if (i == data.path.length) { //当图片传完时，停止调用
　　     that.send()
　　     console.log('执行完毕');
　　     console.log('成功：' + success + " 失败：" + fail);
　　     var myEventDetail = {
　　      picsList: that.data.detailPics
　　     } // detail对象，提供给事件监听函数
　　     var myEventOption = {} // 触发事件的选项
　　     that.triggerEvent('myevent', myEventDetail, myEventOption) //结果返回调用的页面
　　    } else { //若图片还没有传完，则继续调用函数
　　     data.i = i;
　　     data.success = success;
　　     data.fail = fail;
　　     that.uploadimg(data); //递归，回调自己
　　    }
　　   }
　　 });

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

微信小程序中多图片上传的效果如 何做？

微信小程序中多图片上传的效果如何做？