要搞一個小型的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安裝，也可以使用網上開源的

通過設置：

EJS Welcome to

上傳圖片 :

我們可以看到

注意：假如網頁打不開，或者是沒更新出現的html結構的話，就重新的在這個miaomiao.cms下面 npm start重新打開

隨便選一張圖片，onchange就是只要選擇了圖片的話，就會觸發這個事件了，file就是拿到的我們上傳的文件了

拿到這個圖片要怎么傳輸給后臺呢，這個時候就要進行文件操作了FormData這個對象來實現了

通過append 給這個param對象添加一個key為file value為 。也就是通過這個append來產生一個鍵值對

然后把這個對象通過axios來傳輸到后端

這就是axios中傳輸給后端文件的代碼

在傳輸之前，先對 config 配置文件 進行設置，告訴我們后端這個是一個文件數據流

配置好了之后，就可以通過post把圖片傳輸給后臺的接口 uploadBannerImg

通過下面的代碼

與你相遇-CMS管理系統

上傳圖片 :

varuploadBtn=document.getElementById('uploadBtn');

uploadBtn.οnchange= function(ev){varfile=ev.target.files[0];varparam= newFormData();

param.append('file', file);varconfig={

headers : {'Content-Type':'multipart/form-data'}

};

axios.post('/uploadBannerImg', param , config).then((res)=>{

console.log( res.data );

});

};

然后就是開始搞 定義 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

把這兩個代碼書寫錯誤改好了之后，再上傳就可以看到結果了

所以就實現了把圖片傳給后臺了，然后我們就要把這個信息傳給云平臺了(以上完成了前臺的文件傳輸到了后臺)

總結

以上是生活随笔為你收集整理的微信社交小程序服务器,Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。