基于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

1. 要想使用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;

2. 获取文件上传链接

从官方文档可知，传递access_token和env参数，访问文档中的请求地址，获取上传文件所需的参数数据。

从官方文档可知，返回的上传数据中包含如下内容：

• authorization字段
• token字段
• cos_file_id字段
• url字段

3. 上传文件到云存储。

按照官方文档，访问返回的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实现小程序后端管理系统的开发。