快速高效实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储，以及介绍云开发的 5G 存储空间的基本使用方法，这将大大提升微信小程序的开发效率

对于通常的图片上传功能开发，咱们通常须要实现以下几个技术点：

1. 后台服务器的购买；
2. API 域名的购买与配置；
3. API 功能的开发；
4. 图片空间的逻辑处理以及合理管理；
5. 配置图片 CDN 加速图片加载效率。

而当咱们使用腾讯提供的云开发功能时，只须要几行代码便可在微信小程序里实现完整的图片上传逻辑，很是地方便、高效。

2.图片上传的代码实现

使用腾讯云开发实现图片上传的主要业务逻辑以下：

1. 经过 wx.chooseImage 方法让用户选择设备中的图片资源；
2. 经过 wx.cloud.uploadFile 方法实现图片的上传，上传至腾讯提供的免费 5G 空间中；
3. 经过 wx.cloud.uploadFile 的回调事件处理云端返回的图片资源 ID、连接等相关属性，进行后续地处理。

下面咱们直接看这三个业务逻辑的代码部分。

 /* 图片的选择与上传部分逻辑 */
 // 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上传图片
        // 这部分能够自行处理图片的命名方式，这里图片进行了固定命名为 my-image
        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)
      }
    })
  },

这部分比较简单，直接在页面读取加载到的图片连接便可

onLoad: function (options) {

    const {
      fileID,
      cloudPath,
      imagePath,
    } = app.globalData

    this.setData({
      fileID,
      cloudPath,
      imagePath,
    })
  },

后记：图片在云开发管理器中的管理与查看，能够看到图片已成功上传。