### [微信小程序开发中怎样实现图片上传](https://www.prosaas.cn/article/17497)

**Published:** 2018-06-05T03:46:56

**Author:** 5201314

**Excerpt:** 老规矩，直接上代码了。 这个是多个图片上传的方法，单个图片上传的话，把循环去掉就好。主要是因为微信官方默认的就…

老规矩，直接上代码了。

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注知企PROSAAS其它相关文章！

推荐阅读：

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

微信小程序开发中Android请求失败如何处理

以上就是微信小程序开发中怎样实现图片上传的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---