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
把這兩個程式碼書寫錯誤改好了之後,再上傳就可以看到結果了
所以就實現了把圖片傳給後臺了,然後我們就要把這個資訊傳給雲平臺了(以上完成了前臺的檔案傳輸到了後臺)