使用了解api：

1.wx.chooseImage（）//上传图片
2.wx.previewImage（）//预览图片
3.wx.cloud.uploadFile（）//上传至微信云存储

1.wx.chooseImage（）上传图片

从本地相册选择图片或使用相机拍照。

//微信小程序文档示例
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    
    const tempFilePaths = res.tempFilePaths
  }
})

res.tempFilePaths返回实例：

http://tmp/wx683edc816003d2ab.o6zAJswxWKtnsQOuJhiL6wcI5CeE.cudHAXKnW0jZ5665f884721b2d1fbad70ce29aef916d.jpg

这个是可以直接使用在image标签上的

2.wx.preview()预览

//微信官方文档 
wx.previewImage({  
    current: then.data.images[index], // 当前显示图片的http链接
    urls: then.data.images// 需要预览的图片http链接列表

})

可能很多了看了官方文档不会弄，其实这个是和wx.chooseImage配套使用的，如果你要使用预览。

首页你要使用

wx.chooseImage获取到上传的图片返回的url，然后push到一个空数组，再更新到data数据里，然后这个更新到data数组就是 ‘urls‘ ，‘current’就是当前的数组下标显示的

3.wx.cloud.uploadFile（）上传至微信云存储

//微信官方文档
wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => {
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

刚开始我看这个有点懵，因为（cloudPath）上传至云端的路径，路径？那个路径？网上很多文章都没写明白，因为上传路径其实和我们平常写路径上有很大不同。

上传至云端路径，其实就是

就拿我的实例

wx.cloud.uploadFile({ 
      cloudPath: 'ZJK_a/' + new Date().getTime() + item.match(/\.[^.]+?$/)[0], 
      filePath: item, // 文件路径
 })

首先，我们肯定是要新建一个文件夹的

1.这个文件夹就是开始的第一个字符串 'ZJK_a/' （自己替换）

2.为什么要new Date().getTime() ，因为这个图片名得要自己去定义的，如果直接用原路径呢

http://tmp/wx683edc816003d2ab.o6zAJswxWKtnsQOuJhiL6wcI5CeE.cudHAXKnW0jZ5665f884721b2d1fbad70ce29aef916d.jpg

就是上面这个，我们不能指望用临时链接做路径，而且会报错的

3.后面的正则就是取临时链接的jpg

filePath呢？下面详说

为什么要上传云端呢

先看看上传云端的返回

cloud://project-dev-6h07v.7072-project-dev-6h07v-1300589920/ZJK_a/1578927314865.jpg

这个返回是云端文件路径，得存储在数据库里，现在我们使用wx.chooseImage获得的只是临时路径，下次我们用的时候就从数据库里取出来

4.详细上传文件实例

通常我们会通过点击事情，去触发弹出图片选择

第一步

 chooseImage(e) {//上传图片  
  let then = this  
  wx.chooseImage({  
      count: 1,   
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
         let data_img = then.data.images //等于当前的data数据里的预定好的空数组images
         data_img.push(tempFilePaths[0]) //每选择一张图片就push进去 
         then.setData({ //push完，马上更新一下 
           images: data_img   //images,可以循环到视图层里 
         })
      } 
   })

第二步如果你不预览图片，可以不使用这步，无伤大雅

 preview(e) {//预览图片
    let index = e.currentTarget.dataset.index   //需要设置data-index属性
    console.log(e)
    let then = this    
    wx.previewImage({
      current: then.data.images[index], // 当前点击（下标的）显示图片的http链接 
      urls: then.data.images// 需要预览的图片http链接列表
   
 })  },

需要给循环到视图层里image绑定 preview（）事件（通常是这样做的）

然后点击就可以看到上传到的图片了

第三步上传云端 wx.cloud.uploadFile

提醒一下images是wx.chooseImage上传获得的,结合上下文

 let then = this
this.data.images.map((item, index) => {  //多图片就得循环上传，不能一次上传多张
        wx.cloud.uploadFile({
           //cloudPath :路径解释上文已经解释过了
           cloudPath: 'ZJK_a/' + new Date().getTime() + item.match(/\.[^.]+?$/)[0], 
           filePath: item, // 文件路径 ，循环的当前临时路径 
       }).then(res => {   
           // 返回的存储在云端的路径
           then.data.cloud_img.push(res.fileID) //更新到数组    
       if (then.data.images.length == then.datacloud_img.length){  //长度相同，说明已经循环完成 
              //进行更新到数据库操作
           db.collection('userS').doc(options.id).get({
             .....  //更新到数据库后，可以通过获取数据库的数据去使用  图片了，详细下篇更新      
          }) 
         }   
     
      })

.................end

微信云开发上传图片完成，欢迎diss作者的不足

欢迎加作者询问问题