个人中心 | 微信开放社区

基于小程序·云开发的HTTPAPI实现图片上传功能

基于HTTPAPI实现内容管理的图片上传功能目前基于小程序·云开发可以快速的实现无服务器的小程序快速开发。但是小程序开发工具自带的管理工具，并不方便进行内容管理。因此为了更高效的管理小程序，需要开发后台管理工具，以方便在电脑端进行内容管理。基于此，会陆续连载更新基于小程序·云开发HTTPAPI进行后台管理工具相关开发的一些经验文章。前端：elment-admin 后端：node.js koa 前端使用elment-ui el-upload组件实现上传功能对于elment-admin以及elment-ui不熟悉的请自行去官网学习。 elment-admin是基于elment-ui组件构建的后台管理系统UI，功能强大，方便快速构建后台管理系统。 elment-admin：https://github.com/PanJiaChen/vue-element-admin elment-ui：https://element.eleme.io/#/zh-CN/guide/design [代码]<template> <div class="dashboard-container"> <div> <el-upload class="upload-demo" action="http://localhost:3000/upload/imgs" :before-upload="beforeUploadFile" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </div> </div> </template> [代码] 后端基于node koa的后端图片上传功能代码：学习技术的最好方法就是官方文档，因此要想熟练的使用httpapi构建小程序的后端管理系统，就必须先熟悉官方文档。小程序官方文档链接：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html 要想使用Httpapi去实现图片上传功能，我们需要先获取访问请求中的参数access_token。access_token获取的官方文档内容： [图片] 通过官方文档可知，传递参数appid和secret，发送请求到文档中的地址，可以获取access_token数据。 access_token获取，存储以及定时更新的相关代码如下： [代码]const rp = require('request-promise') const fs = require('fs') //引用文件操作函数 const path = require('path') //引入文件路径函数 //获取文件的绝对路径 const filePath = path.resolve(__dirname, './access_token.json') //小程序的APPID和Secret const APPID = '小程序的APPID' const Secret = '小程序的Secret' //获取Token的URL const URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${Secret}` //从小程序端获取Token函数 const updateAccessToken = async () => { const resStr = await rp(URL) //将字符串类型转为对象 const res = JSON.parse(resStr) if (res.access_token) { //写入文件 fs.writeFileSync(filePath, JSON.stringify({ access_token: res.access_token, //从小程序服务器获取的token createTime: new Date() //获取token时，对应的时间 })) } else { //如果文件不存在，则重新调用获取token函数，重新执行写入 await updateAccessToken() } } //查询Token函数返回给响应的函数去调用云函数 const getAccessToken = async () => { try { //读取文件 const readRes = fs.readFileSync(filePath, 'utf8') const readObj = JSON.parse(readRes) //获取access_token.json中的createtime的时间 const createTime = new Date(readObj.createTime).getTime() //获取当前时间 const nowTime = new Date().getTime() //判断Token的失效是否大于2小时，如果大于2小时则需要重新获取Token,然后在读取Token数据 if ((nowTime - createTime) / 1000 / 60 / 60 >= 2) { await updateAccessToken() await getAccessToken() } //返回Token数据 return readObj.access_token } catch (error) { //如果access_token文件不存在，则读取报错，此时需要重新从服务器获取token数据，再读取token数据 await updateAccessToken() await getAccessToken() } } //定时更新Token setInterval(async () => { await updateAccessToken() }, (7200 - 300) * 1000) module.exports = getAccessToken; [代码] 获取文件上传链接从官方文档可知，传递access_token和env参数，访问文档中的请求地址，获取上传文件所需的参数数据。 [图片] 从官方文档可知，返回的上传数据中包含如下内容： authorization字段 token字段 cos_file_id字段 url字段上传文件到云存储。按照官方文档，访问返回的url字段的链接，并传递相关参数，将图片上传到云存储。 [图片] 图片上传功能的代码如下: [代码]const rp = require('request-promise') const fs = require('fs') //引用文件操作函数 const getAccessToken = require('./getAccessToken') const cloudStorage = { // 1、请求地址 async upload(ctx){ console.log(1,ctx) const ACCESS_TOKEN = await getAccessToken() const file = ctx.request.files.file const path = `test/${Date.now()}-${Math.random()}-${file.name}` var options = { method: 'POST', uri: `https://api.weixin.qq.com/tcb/uploadfile?access_token=${ACCESS_TOKEN}`, body: { env: 'miniprogram-dev-y7a0a', path, }, json: true // Automatically stringifies the body to JSON }; //请求返回的参数 const info = await rp(options) .then(res => { // POST succeeded... return res }) .catch(err => { // POST failed... console.log(err) }); // 2、上传文件到云存储 const params ={ method: 'POST', uri:info.url, header:{ 'content-type':'multipart/form-data' }, formData:{ key:path, Signature:info.authorization, 'x-cos-security-token':info.token, 'x-cos-meta-fileid':info.cos_file_id, file:fs.createReadStream(file.path) }, json: true // Automatically stringifies the body to JSON } await rp(params) return info.file_id } } module.exports=cloudStorage; [代码] 后续会陆续更新相关技术文章，来帮助大家快速熟悉和使用小程序·云开发实现小程序的快速开发，以及基于HTTPAPI实现小程序后端管理系统的开发。

GitHub账号

选择需要上架的开放服务

案例类型