微信小程序上传图片到云开发控制台存储及从储存下载图片到本地相册全流程

一、选择图片

 chooseImage: function (e) {
    var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        console.log("返回的路径",res)
        // 返回选定照片的本地文件路径列表,该路径为临时路径,tempFilePath可以作为img标签的src属性显示图片
        that.setData({
        imgs: res.tempFilePaths
        });
      }
    })
  },

二、查看图片

可以通过wx.preview接口查看图片

previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.id, // 当前显示图片的http链接
      urls: this.data.imgs // 需要预览的图片http链接列表
    })
  },

三、上传图片

通过wx.cloud.uploadFile接口上传图片文件

 uploadImg(e) { 
      wx.cloud.uploadFile({
        cloudPath: 'guestImg/'+e.idcard + e.name+'.png', // 上传至云端的路径
        filePath: e.img, // filepath为chooseImage接口的回调函数中的res.temFilePath的临时地址值。
        success: res => {
          // uploadFile接口回调函数返回的res.fileID为上传图片到云存储后的fileID值
          url = res.fileID
          console.log("上传图片地址", res.fileID)
        },
        fail: console.error
      })
    } 
  }

四、下载云存储的图片到本地相册

使用wx.cloud.downloadFile接口下载云存储的图片,回调函数的返回值res.tempFilePath为下载云存储图片到本地的临时路径。wx.saveImageToPhotesAlbum接口可以将下载到本地的临时文件保存到本地相册,他的filePath就是wx.cloud.downloadFile的回调函数的返回值res.tempFilePath.

 wx.cloud.downloadFile({
      fileID: url,//这个地方的fileID就是云存储文件的fileID
      success: function (res) {  
        console.log("下载图片成功",res.tempFilePath)          //成功后的回调函数
        wx.saveImageToPhotosAlbum({         //保存到本地
          filePath: res.tempFilePath,
          success(res) {
            wx.hideLoading()
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function (err) {
            if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
              wx.openSetting({
                success(settingdata) {
                  console.log(settingdata)
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    console.log('获取权限成功,给出再次点击图片保存到相册的提示。')
                  } else {
                    console.log('获取权限失败,给出不给权限就无法正常使用的提示')
                  }
                }
              })
            }
          }
        })
      }
    })  

通过上述步骤和接口即可实现将本地图片上传到存储和从云存储下载文件到本地相册的全流程。

    原文作者:偷轮子
    原文地址: https://blog.csdn.net/qq_20411471/article/details/108491732
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞