前端-微信小程序云开发:图片上传临时路径和云存储路径

1,336 阅读1分钟

在小程序开发的过程中有图片上传的需求,使用云开发实现图片上传的功能; 云函数在创建小程序云开发的时候,有示例:

js中代码如下示例:

  // 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        wx.showLoading({
          title: '上传中',
        })
        const filePath = res.tempFilePaths[0]

        // 上传图片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功:', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath

            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败:', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

云上传成功

 wx.cloud.uploadFile(); 

  • 上传文件成功后,云函数返回云存储路径:fileID

      {errMsg: "cloud.uploadFile:ok", fileID: "cloud://develop-1755.6465-develop-1755-1300952959/vdC30K8plW6Ja3f3302e58f9a181d2509f3dc0fa68b0.jpeg", statusCode: 200}
      errMsg: "cloud.uploadFile:ok"
      fileID: "cloud://develop-1755.6465-develop-1755-1300952959/vdC30K8plW6Ja3f3302e58f9a181d2509f3dc0fa68b0.jpeg"
      statusCode: 200
      __proto__: Object
    
  • 在做图片渲染的时候,使用wx.chooseImage()成功返回的filePath作为预览或者临时展示的文件路径;filePath具有时效性,一定时间以后会失效;

  • 在做数据库插入操作的时候,将fileID作为最后图片渲染的imagePath的路径;