Day12-微信小程序實戰-交友小程序-搭建服務器與上傳文件到後端

時間 2020-06-28

標籤 day12 day 微信程序實戰交友搭建服務器上傳文件後端简体版

原文原文鏈接

要搞一個小型的cms內容發佈系統javascript

由於小程序上線以後，直接對數據庫進行操做的話，慧出問題的，因此通常都會作一個管理系統，讓工做人員經過這個管理系統來對這個數據庫進行增刪改查css

微信小程序其實給咱們提供了這樣的能力了html

（也就是能夠在本身已有的服務器來進行雲操做，因此就能夠經過這個CMS內容管理系統來對雲數據庫進行修改）前端

咱們就要創建本身的web服務器--》搭建一個簡易的服務器java

https://koa.bootcss.com/node

這個是要node版本是7以上，能夠在node官網去搭建，我這邊以前按照過了，直接cmd打開，經過 node -v查看版本ios

而後還要下載一個 cnpm，這個主要是下載第三方模塊用的git

https://www.cnblogs.com/biglovevolcaner/p/6707746.htmlgithub

打開cmd，直接輸入這位大佬博客裏面的語句進行安裝便可了web

這些都準備好了以後，就能夠開始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安裝，也可使用網上開源的

經過設置：

<!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

2、把拿到的文件上傳到雲開發中

這裏的use多了一個r

把這兩個代碼書寫錯誤改好了以後，再上傳就能夠看到結果了

因此就實現了把圖片傳給後臺了，而後咱們就要把這個信息傳給雲平臺了（以上完成了前臺的文件傳輸到了後臺）

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html

經過：

POST https://api.weixin.qq.com/tcb/uploadfile?access_token=ACCESS_TOKEN

經過這個代碼實際上是進行身份驗證拿到一個通行證Token，纔可使用這樣的功能

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html

經過：

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

可見它須要的是APP 的id還有密鑰，這兩個均可以在

https://mp.weixin.qq.com/wxamp/wxaalarm/get_jserr?token=590850009&lang=zh_CN

開發-》開發設置（就能夠拿到id和密鑰了）

兩個都拿到的話，就能夠經過get來得到Token了，而後再用post便可了

首先在

在外層寫一個配置文件，由於這個id和密鑰都是比較隱私的，爲了避免讓其餘人看到的話，最好就是寫一個配置文件了

把用戶名和密鑰都寫到這個配置文件中去，而後開始打碼

先在config.js裏面提供一個對外接口

（裏面的數據寫入本身的便可）

module.exports = {
    appid : '',
    secret : ''
};

而後在index.js裏面引入這個配置文件

const config = require('./config.js');

而後在koa2中，咱們用的是request和request-promise，這樣的一些第三方的模塊，若是要安裝的話，能夠在github裏面看看

https://github.com/request/request-promise

而後咱們把後臺關掉，開始下載一下這些東西

輸入 cnpm i -S request request-promise

就能夠安裝這兩個東西了

就能夠看到已經下載成功，咱們就能夠開始使用了

const request = require('request-promise');

還有一個內置的fs用來操做文件的模塊，咱們能夠直接引入，就不用下載了

const fs = require('fs');

而後在路由的index.js文件中的router.post裏面添加：

  try{
    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 );
  } catch(err){
    console.log(err.stack)
  }

可是出現了報錯

少了一個點，要。。/才行