5行代码玩转微信小程序图片上传与腾讯免费5G存储空间的使用

2023-10-01 23:54:54

在微信小程序开发中，我们经常需要对图片进行上传和存储，而腾讯云开发提供了非常便捷的功能来帮助我们实现这些操作。腾讯云开发的5G存储空间也是一个非常有用的工具，可以让我们免费存储大量的数据。

一、微信小程序图片上传

在微信开发者工具中，打开你的小程序项目。
在项目目录中，创建一个名为cloud的文件夹。
在cloud文件夹中，创建一个名为images的文件夹。
将你要上传的图片复制到images文件夹中。
在小程序代码中，打开app.js文件。
在app.js文件中，添加以下代码：

const cloud = require('wx-server-sdk')

cloud.init()

exports.main = async (event, context) => {
  const file = event.file
  const filePath = `cloud://${cloud.getCloudbaseConfig().resource}/images/${file.name}`

  const res = await cloud.uploadFile({
    cloudPath: filePath,
    fileContent: file.buffer,
  })

  return {
    fileID: res.fileID,
    url: res.url,
  }
}

在小程序代码中，打开要上传图片的页面文件。
在页面文件中，添加以下代码：

const cloud = require('wx-server-sdk')

cloud.init()

const app = getApp()

Page({
  data: {
    fileID: '',
    url: '',
  },

  onLoad: function () {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const file = res.tempFiles[0]
        this.uploadFile(file)
      },
    })
  },

  uploadFile: function (file) {
    wx.cloud.callFunction({
      name: 'uploadImage',
      data: {
        file: file,
      },
      success: (res) => {
        this.setData({
          fileID: res.result.fileID,
          url: res.result.url,
        })
      },
      fail: (err) => {
        console.error(err)
      },
    })
  },
})