Day12-微信小程式實戰-交友小程式-搭建伺服器與上傳檔案到後端

gogocj發表於2020-06-27
微信小程式伺服器後端

要搞一個小型的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

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

 

所以就實現了把圖片傳給後臺了，然後我們就要把這個資訊傳給雲平臺了（以上完成了前臺的檔案傳輸到了後臺）

 

相關文章