评论

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

基于小程序·云开发HTTPAPI构建小程序的后台内容管理系统的相关技术文章连载。本文章主要介绍:基于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构建小程序的后端管理系统,就必须先熟悉官方文档。

  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;
  1. 获取文件上传链接

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

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

  • authorization字段
  • token字段
  • cos_file_id字段
  • url字段
  1. 上传文件到云存储。

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

最后一次编辑于  10-11  
点赞 0
收藏
评论

2 个评论

  • Aか潘   💯
    Aか潘 💯
    11-08


     楼主 请问file怎么传什么啊


    11-08
    赞同 1
    回复 1
    • One Eight Nine Four
      One Eight Nine Four
      11-18
      同问
      11-18
      回复
  • ZyBlog
    ZyBlog
    11-09

    data format error问题解决了嘛?

    11-09
    赞同
    回复