開場白

在平時的業務中，我們很多使用都會有文件上傳這個功能。
今天分享一下使用 node+element-ui實現一下文件上傳。
請個人大佬指點一番~~~。批評的時候稍微輕一點。
畢竟我心里承受能力弱地一批，一不高興就喜歡....

使用 element-ui庫el-upload組件fil類型上傳

前端上傳文件的時候，我們通常file對象。
較小的圖片的當然也可以使用base64的方式進行上傳。
等會我們將會將file轉化為base64。
file對象傳參的時候是這樣的 file:file(二進制對象)   
并且'Content-type': 'multipart/form-data'
下面我們使用 element-ui 的el-upload 組件進行文件上傳.
我們會使用 http-request 自定義事件覆蓋原來的事件。
請看下面的代碼

<template>
  <div>
    <h2>文件上傳</h2>
    <el-upload class="upload-demo" action="https"  
       :http-request="uploadFile">
      <el-button size="small" type="primary">點擊上傳</el-button>
    </el-upload>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    uploadFile(file) {
      console.log('file對象', file)
      axios.post('http://127.0.0.1:666/upload/upload',
        {
          file:file
        },  {
            'Content-type': 'multipart/form-data'
          }
      ).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

寫過很多文件上傳的的小伙伴。
你們覺得可以上傳成功嗎？ 
會是file:file(二進制)對象嗎？
憑借自己的感覺想一分鐘，然后下滑

為什么傳參的是 file:{...},而不是file:file(二進制)

有的小伙伴會說 你傳的時候不應該是file,應該是file.file
因為從你剛剛的截圖來看應該是：file.file才是我們需要的。
感覺說的有道理，我們嘗試一下。

使用FormData來解決這個問題

FormData是XMLHttpRequest提供的一個接口對象，
用以將數據編譯成鍵值對，以便于XMLHttpRequest來發送數據。
創建一個 FormData對象，并添加屬性。
FormData 可以通過 append(key, value)來添加數據。
上面說了 FormData的簡單介紹。
并沒有說為啥FormData可以使用解決這個這個問題？
那為什么FormData可以解決這個問題了？
因為：
File 接口基于 Blob，繼承 blob 功能并將其擴展為支持用戶系統上的文件。
你可以通過 Blob() 構造函數創建一個 Blob 對象。
而 FormData 對象附加 File 或 Blob 類型的文件，所以我們可以添加。

<script>
import axios from 'axios'
export default {
  methods: {
    uploadFile(file) {
      let formdata = new FormData();
      console.log(file);
      formdata.append("file", file.file);
      axios.post('http://127.0.0.1:666/upload/upload',
        formdata,  {
            'Content-type': 'multipart/form-data'
          }
      ).then(function (response) {
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}
</script>

將file轉為base64

<template>
  <div>
    <!-- accept 接收圖片格式 -->
    <input type="file" title="" ref="inputRef" 
    accept=".jpeg,.png, .gif,.jpg" @change="Upload">
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    // 文件上傳被觸發
    Upload(event) {
      const flie = event.target.files[0]; //直接獲取的就是file對象
      this.fileChangeBase64(flie).then(backres => {
        console.log('base64', backres)
        // 上傳成功后的處理,清除input中value值，否則只相同文件只能夠上傳一次
        // this.$refs.inputRef.value = ""; 在合適的時候使用
      }).catch(err => {
        console.log('err', err )
      })
    },
    // 將file對象轉化為base64
    fileChangeBase64(file) {
      return new Promise((resolve, reject) => {
        //FileReader類就是專門用來讀文件的，我們現在創建一個
        const reader = new FileReader()
        // 它的本質就是圖片的二進制數據， 進行base64加密后形成的一個字符串.
        reader.readAsDataURL(file)
        // 成功返回對應的信息，reader.result一個base64
        reader.onload = () => resolve(reader.result)
        // 失敗返回失敗的信息
        reader.onerror = error => reject(error)
      })
    }
  }
}
</script>

需要注意的一點，我這里是將file轉為base64哈。
base64將不會不能被multer處理的哈~或者說不能夠處理

node中間件 multer 的簡單介紹

前端代碼已經寫好了，現在我們開始寫后端的代碼，后端我們使用node+express
multer 是一個 node.js 中間件。
它用于處理 multipart/form-data 類型的表單數據，它主要用于上傳文件。
需要注意的是: multer 不會處理任何非 multipart/form-data 類型的表單數據。
換一句換說：前端必須這樣設置類型 'Content-type': 'multipart/form-data'

guthub官方解釋鏈接
https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

下載 multer

前端代碼寫好了，現在我們開始借助node來實現后端的代碼
我們使用 multer 來進行文件傳
第一步:先下載 multer 模塊
npm i express multer -S
我下載的時候是1.4.5版本

fileupload.js文件

// 引入express
var express = require('express')
//添加路由模塊
var router = express.Router()
// 文件上傳需要的模塊
var multer=require('multer')
// 配置路徑和文件名
var storage = multer.diskStorage({
  //上傳文件到服務器的存儲位置
  destination: 'public/upload',
  filename: function (req, file, callback) {
    //上傳的文件信息
    console.log('file', file) 
    /**
     * file {
        fieldname: 'file',
        originalname: 'JRMW5Y~E5B%UO4$EZ)[)XLR.png',
        encoding: '7bit',
        mimetype: 'image/png'
      }
    */
    // 將字符串分割成為數組，以點.的形式進行分割。返回的是一個數組
    var fileFormat = (file.originalname).split('.')
    // 獲取時間戳
    var filename = new Date().getTime()
    // 文件的命名為：時間戳 + 點 + 文件的后綴名
    callback(null, filename + "." + fileFormat[fileFormat.length-1])
  }
})
var upload = multer({
  storage
})
router.post('/upload', upload.single('file'), (req, res) => {
  res.send({ code:'0', msg:'上傳成功'})
})
module.exports = router;

app.js 引入注冊路由

// 引入
var uploadRouter = require('./routes/fileupload');
// ... 其他代碼....
//注冊接口前綴/upload
app.use('/upload', uploadRouter);

//這個時候接口就是 /upload/upload

需要注意的點

1. 需要注意的點：upload.single('key') 必須要與前端中
formData.append("file", flie)key鍵名保持一致。

2. 為什么不直接使用前端傳遞傳來的名稱？
因為有可能名稱會重復，這樣不好。

3. 因為前端上傳文件的時候使用change事件進行監聽的。
注意在合適的時候清除它的value值，否者上傳相同的文件change事件不會被觸發