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

欢迎大家来到IT世界,在知识的湖畔探索吧!

需求功能

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

云函数开发遇到的问题

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

所以普通用户想要使用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, }) } 

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

解决方案

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

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

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

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

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

上传图片至云存储

欢迎大家来到IT世界,在知识的湖畔探索吧!//上传图片至云存储 wx.cloud.callFunction({ name: 'uploadFile', data: { path: 'images/product/..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文件中已经有具体描述，通过具体到秒的时间和图片的上传顺序进行编码 基本可以保证不会有重名的文件存在。

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

欢迎大家来到IT世界,在知识的湖畔探索吧!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('_') }