功能的簡述：
此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\nodejs）
npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"
執行完成后就可以看到紅框里面的文件夾了。ps：cache是使用了npm install下載了包之后才會創建
3、在系統環境變量添加系統變量NODE_PATH，輸入路徑D:\Program Files\nodejs\node_global\node_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>
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)
})
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); } })
25、設置好后就可以重啟web網站做測試了
源碼參考：點這里