使用koa2做一个简单的图片上传web

功能的简述：

此web页面的开发依赖于微信小程序的http api接口，通过小程序http api的相关接口（auth.getAccessToken、uploadFile、databaseAdd），将本地图片通过web上传到云存储中

本地web页面使用了koa2的koa-generator，能够快速的搭建本地web环境（里面用到的几个模块：axios.min.js、request、request-promise、fs）

Node基础安装配置参考：https://www.cnblogs.com/liaojie970/p/9296177.html

启动web：命令提示符定位到项目文件夹下，执行：npm start

启动后通过localhost:3000来访问

1、安装Node.js

2、改变原有的环境变量（假设：node的安装路径D:Program Files odejs）

npm config set prefix "D:Program Files
odejs
ode_global"
npm config set cache "D:Program Files
odejs
ode_cache"

执行完成后就可以看到红框里面的文件夹了。ps：cache是使用了npm install下载了包之后才会创建

3、在系统环境变量添加系统变量NODE_PATH，输入路径D:Program Files odejs ode_global ode_modules，此后所有安装的模块通过npm install xxxx -g都会安装到改路径下(-g表示安装在global目录下)

4、在命令行输入以下命令试着安装express

npm install express -g

完成后再对应目录能看到express文件夹

5、在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：

require('./express')

如果这里出错，则要检查环境变量的配置看是否正确

6、安装淘宝npm（cnpm）

a、输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

b、环境变量--添加用户变量

c、打开cmd命令提示符输入 cnpm -v 如果系统没有报错则说明配置OK了

7、安装 koa-generator

cnpm install koa-generator -g

8、创建网站目录（命令提示符进入到你想创建的目录下，默认是在c:盘的）

koa2 practice-cms -e

9、进入刚才创建的目录下执行以下命令，安装初始模块

cnpm i

10、执行npm start，启动网站

npm start

成功后会在cmd命令提示符下显示

11、在浏览器输入localhost:3000 浏览网站

12、下载vscode，打开刚才创建的practice-cms文件夹

public文件夹是放一些静态资源的里面的javascripts文件夹需要下载个axios.min.js文件，此文件可以发起ajax

routes文件夹主要是路由
views是前台页面展示

13、找到views目录下index.js，编辑内容为：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/axios.min.js"></script>
  </head>
  <body>
    <h1>交友-CMS</h1>
    <label for="">
      上传图片：<input type="file" id="uploadBtn">
    </label>

    <script>
      //获取上传控件的对象
      var uploadBtn = document.getElementById('uploadBtn');
      uploadBtn.onchange = function(e){
        var file = e.target.files[0];   //获取上传的文件
        var param = new FormData();     
        param.append('file',file);

        var config = {
          headers : {
            'Content-Type':'multipart/form-data'  //头部文件类型定义
          }
        };
        //调用后端uploadBannerImg接口,具体定义在routes文件夹下index.js内
        axios.post('/uploadBannerImg',param,config).then((res)=>{  

          console.log( res.data )

        });

      }
    </script>
  </body>
</html>

View Code

14、回到命令提示符界面使用Ctrl+c 取消当前运行的网站，再用npm start重新跑一边网站加载最新的修改页面

15、在vs中找到routes文件夹下的index.js，新增刚刚在web前端页调用的/uploadBannerImg方法

router.post('/uploadBannerImg',async (ctx,next)=>{
  var files = ctx.request.files;
  console.log(files)
})

View Code

16、再次停止网站，再次运行然后刷新页面后选择一张照片，再打开命令提示符，正常的话在命令提示符下能看到图片的名字和路径了

但是此时还是看不到，原因是少安装了一个模块

17、停止网站，执行：cnpm i -S koa-body

18、在practice-cms的文件夹下找到app.js，打开引入一下新下载的koa-body

const koaBody = require('koa-body')

再做一个简单的图片上传配置

app.use(koaBody({
  multipart:true,
  formidable:{
    maxFileSize:200*1024*1024    //设置上传文件的大小，默认2M
  }
}))

19、再次运行网站，上传图片则再命令提示符下就能看到对应的图片路径了

20、在practice-cms目录新建config.js，将微信小程序的appId和secret存在配置文件中备用

module.exports={
    appId:'',
    secret:''
};

21、在routes的index.js文件引入刚刚新建的config.js文件

const config = require('../config.js')

22、cmd提示符定位到practice-cms安装koa框架需要的request和request-promise ps：这两个模块是专门用来做Http请求的

cnpm i -S request request-promise

23、在routes的index.js文件再引入

//引入koa2对外http请求的类
const request = require('request-promise')
//引入文件操作类（内置的）
const fs = require('fs')

24、完善/uploadBannerImg方法

//接收web页面传到后台的文件
router.post('/uploadBannerImg',async (ctx,next)=>{

  var files = ctx.request.files;
  var file = files.file;
  //console.log(files)
  try{
    
    //发起get请求，获取access_token
    let options = {
      uri:'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + config.appId + '&secret=' + config.secret,
      json:true
    }

    let {access_token} = await request(options)
    //console.log(access_token);
    let fileName = `${Date.now()}.jpg`;   //es6模板字符串写法
    let filePath = `banner/${fileName}`;
    
    //发起post请求，获取上传图片链接的url地址
    options = {
      method:'POST',
      uri:'https://api.weixin.qq.com/tcb/uploadfile?access_token=' + access_token,
      body:{
        "env":config.env,    //云数据库ID
        "path":filePath  //图片路径
      },
      json:true
    }

    let res = await request(options);   //发起请求并接受返回参数
    let file_id = res.file_id;  //获取返回的文件ID值

    options = {
      method:'POST',
      uri:'https://api.weixin.qq.com/tcb/databaseadd?access_token=' + access_token,
      body:{
        "env":config.env,  //云数据库ID
        "query":"db.collection("banner").add({data:{fileId:"" + file_id + ""}})"
      },
      json:true
    }
    
    //将拿到的file_id插入到云数据的banner集合中
    await request(options);


    //再次组装数据，将本地的图片以文件流的形式组装好，通过上传连接把图片上传到云存储中
    options = {
      method:'POST',
      uri:res.url,
      formData:{
        "signature":res.authorization,
        "key":filePath,
        "x-cos-security-token":res.token,
        "x-cos-meta-fileid":res.cos_file_id,
        "file":{
          value:fs.createReadStream(file.path),
          options:{
            filename:fileName,
            contentType:file.type
          }
        }
      }
    }

    await request(options);
    ctx.body = res;

  }catch(error){
    console.log(error.stack);
  }


})

View Code

25、设置好后就可以重启web网站做测试了

源码参考：点这里