微信小程序开发中怎样实现图片上传-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

微信小程序开发中怎样实现图片上传

老规矩，直接上代码了。

handleCancelPic() {        let id = this.data.dbId;        wx.chooseImage({          count: 3, // 默认9          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有          success: res => {            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片            var tempFilePaths = res.tempFilePaths;            this.setData({                src: tempFilePaths            })            upload(this,tempFilePaths,'','');          }        })    }然后一个封装好的方法function upload(page, path,way,id) {    console.log(path)  wx.showToast({    icon: "loading",    title: "正在上传"  });  var test = [],    that = this;  for (var i = 0; i<path.length; i++) {        wx.uploadFile({          url: api.CancelImg,          filePath: path[i],                    name: 'file',          header: { "Content-Type": "multipart/form-data" },          success: res => {            test.push(res);            wx.setStorageSync('cancelImg',test)            console.log(test)            if (res.statusCode != 200) {               wx.showModal({                title: '提示',                content: '上传失败',                showCancel: false              })              return;            }else {                wx.showModal({                    title: '提示',                    content: '上传成功',                    showCancel: false                })             }          },          fail: function (e) {            console.log(e);            wx.showModal({              title: '提示',              content: '上传失败',              showCancel: false            })          },          complete: function () {            wx.hideToast();  //隐藏Toast          }        })    }

登录后复制

这个是多个图片上传的方法，单个图片上传的话，把循环去掉就好。主要是因为微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。

相信看了本文案例你已经掌握了方法，更多精彩请关注9543建站博客其它相关文章！