评论

微信答题小程序云开发--实现云函数上传题目图片 base64功能

需求功能:题目带有图片,需要支持上传图片功能。微信答题小程序云开发,实现云函数上传题目图片、存储功能、查询显示等功能。

需求功能

题目带有图片,需要支持上传片功能。微信答题小程序云开发,实现云函数上传题目图片、存储功能、查询显示等功能。


云函数开发遇到的问题

在微信云开发环境当中,普通的用户并没有往云存储内写入文件的权限。

所以普通用户想要使用wx.cloud.uploadFile显然是不现实的。

但是我们同时也知道,云函数是后台服务端,具有管理员权限,只要能调用云函数上传文件就可以解决这个问题了。

参照官方文档中云函数的写法。


uploadFile

将本地资源上传至云存储空间,如果上传至同一路径则是覆盖。


使用示例

Promise 风格

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = async (event, context) => {
  const fileStream = fs.createReadStream(path.join(__dirname, 'demo.jpg'))
  return await cloud.uploadFile({
    cloudPath: 'demo.jpg',
    fileContent: fileStream,
  })
}


官方文档写的云里雾里,并不是这么容易理解。

_dirname代表的是文件根目录,官方文档能实现的功能貌似只是移动云存储空间中的文件,并不能操作本地文件。


解决方案

只上传文件路径是不能把本地文件成功上传到云存储的,但是我们可以将本地文件进行 进制 编码 转化为字节流上传到云函数中。

再在云函数的操作中把字节或文件转化为相对应的格式。

微信小程序文档为我们提供了一个很好的用于编码文件的功能函数。

利用这个函数,可以把图片编码成为base64 的形式上传到云函数。

如果是多个图片上传,只需要遍历即可。



上传图片至云存储

//上传图片至云存储
wx.cloud.callFunction({
        name: 'uploadFile',
        data: {
            path: 'images/product/1710750841751491725.3929234613.jpg',
            base64Str
        }
    })



node中将base64转成Buffer

// node中将base64转成Buffer
    let base64 = event.base64Str.replace(/^data:image\/\w+;base64,/, '')
    const { fileID } = await cloud.uploadFile({
      cloudPath: event.path,
      fileContent: Buffer.from(base64, 'base64') // 把base64码转成buffer对象

    })



实现效果

成功上传,在云存储中查看:


在答题小程序中显示效果:



一种云存储文件名称的编码方式

基本方式在js文件中已经有具体描述,通过具体到秒的时间和图片的上传顺序进行编码 基本可以保证不会有重名的文件存在。

现在给出时间的编码方式:

function vcode(date)
{
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('_')  + '_'+[hour, minute, second].map(formatNumber).join('_')
}


最后一次编辑于  03-26  
点赞 0
收藏
评论
登录 后发表内容