重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

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

时间:2020-09-12 13:00:06 作者:重庆seo小潘 来源:
老规矩,直接上代码了。handleCancelPic() {let id = this.data.dbId;wx.chooseImage({count: 3, // 默认9sizeType: [compressed], // 可以指定是原图还是压缩图,默认二者都有sourceType: [album, camera], // 可以指定来源是相册还是相机,默认二者都有suc

老规矩,直接上代码了。handleCancelPic() {let id = this.data.dbId;wx.chooseImage({count: 3, // 默认9sizeType: ['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}})}这个是多个图片上传的方法,单个图片上传的话,把循环去掉就好。主要是因为微信官方默认的就是一次上传一张图片这个很蛋疼。只能这么搞了。。。

相信看了本文案例你已经掌握了方法,更多精彩请关注小潘博客其它相关文章!

推荐阅读:

微信小程序开发容器视图的使用

微信小程序开发中Android请求失败如何处理以上就是微信小程序开发中怎样实现图片上传的详细内容,更多请关注小潘博客其它相关文章!