微信小程序使用云开发上传多(单)图片(详解)

4,208 阅读2分钟

使用了解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作者的不足

欢迎加作者询问问题