Day12-微信小程式實戰-交友小程式-搭建伺服器與上傳檔案到後端
要搞一個小型的cms內容釋出系統
因為小程式上線之後，直接對資料庫進行操作的話，慧出問題的，所以一般都會做一個管理系統，讓工作人員通過這個管理系統來對這個資料庫進行增刪改查
微信小程式其實給我們提供了這樣的能力了
（也就是可以在自己已有的伺服器來進行雲操作，所以就可以通過這個CMS內容管理系統來對雲資料庫進行修改）
我們就要建立自己的web伺服器--》搭建一個簡易的伺服器
https://koa.bootcss.com/
這個是要node版本是7以上，可以在node官網去搭建，我這邊之前按照過了，直接cmd開啟，通過 node -v檢視版本
然後還要下載一個 cnpm，這個主要是下載第三方模組用的
https://www.cnblogs.com/biglovevolcaner/p/6707746.html
開啟cmd，直接輸入這位大佬部落格裡面的語句進行安裝即可了
這些都準備好了之後，就可以開始koa2的伺服器搭建了
我們選擇koa的腳手架 koa-generator
https://blog.csdn.net/sinat_39049092/article/details/104575018
（跟這個部落格到第三步就行）
然後我們就可以到想要搭建系統的檔案中（我在d盤新建了一個weapp檔案）
在cmd中輸入D:\weapp 之後輸入 d：即可跳轉
輸入 koa2 miaomiao-cms -e
（後面的-e表示的是選擇ejs模板）
然後安裝提示，我們進入到這個建立的東西 cd miaomiao-cms
然後安裝一些初始的模組
輸入 cnpm i
創立完之後，就可以去啟動了，我們通過 npm start
啟動好之後，我們在網頁中 輸入 localhost:3000
如果看到了這個介面的話，說明web伺服器就已經搭建好了，就可以在這個web伺服器下做一個簡易的cms系統了
之後就可以在d盤找到這個檔案了
其中的public主要是放一些靜態資源的
在vscode裡面開啟我們的檔案
這個index其實就是類似於可以在前端顯示的
實現引入 axios.min.js 可以通過npm安裝，也可以使用網上開源的
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
通過設定：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>EJS Welcome to <%= title %></p>
<label for="">
上傳圖片 : <input type="file" id="uploadBtn">
</label>
</body>
</html>
我們可以看到
注意：假如網頁打不開，或者是沒更新出現的html結構的話，就重新的在這個miaomiao.cms下面 npm start重新開啟
隨便選一張圖片，onchange就是隻要選擇了圖片的話，就會觸發這個事件了，file就是拿到的我們上傳的檔案了
拿到這個圖片要怎麼傳輸給後臺呢，這個時候就要進行檔案操作了FormData這個物件來實現了
通過append 給這個param物件新增一個key為file value為 。也就是通過這個append來產生一個鍵值對
然後把這個物件通過axios來傳輸到後端
這就是axios中傳輸給後端檔案的程式碼
在傳輸之前，先對 config 配置檔案 進行設定，告訴我們後端這個是一個檔案資料流
配置好了之後，就可以通過post把圖片傳輸給後臺的介面 uploadBannerImg
通過下面的程式碼
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://unpkg.com/axios/dist/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(ev){
var file = ev.target.files[0];
var param = new FormData();
param.append('file' , file); var config = {
headers : {
'Content-Type' : 'multipart/form-data'
}
}; axios.post('/uploadBannerImg' , param , config).then((res)=>{
console.log( res.data );
});
};
</script>
</body>
</html>
然後就是開始搞 定義 uploadBannerImg 這個介面了
在routes-》index.js裡面，新增上這個程式碼
router.post('/uploadBannerImg' , async(ctx , next)=>{
var files = ctx.request.files;
console.log( files );
})
我們新增一個圖片，然後可以看到在後端中
會發現404了，我們再通過 npm start來開啟
先要結束上面的操作，通過 ctrl+c 彈出
然後輸入y之後，通過npm start，然後再次上傳圖片
打印出來了這個，說明file為undefined 也就是沒拿到這個圖片了
這個是因為koa預設是得不到我們上傳檔案的東西的，還需要下載一個第三方的模組來輔助完成這個功能才行
通過在miaomiao-cms目錄下的cmd 輸入 cnpm i -S koa-body
下載好了之後，在app.js裡面，引入koa-body
const koaBody = require('koa-body')
然後在app.js裡面做一個簡單的配置
app.use(koaBody({
multipart : true,//指定是否可以上傳多張
formidable : {
maxFileSize : 200*1024*1024 //設定上傳檔案大小最大限制，預設2M
}
}))
（不配置這個，用預設的也是可以的）
搞好之後，再把專案 npm start啟動一下
上傳圖片之後，還是顯示 undefined
原因就是index.js裡面的files少了一個s
這裡的use多了一個r
把這兩個程式碼書寫錯誤改好了之後，再上傳就可以看到結果了
所以就實現了把圖片傳給後臺了，然後我們就要把這個資訊傳給雲平臺了（以上完成了前臺的檔案傳輸到了後臺）