NodeJ+Express+Vue+ElementUI+multer 實作upload檔案上傳（純JS開發背景功能），記住不是java的哦

本文章用于本人開發過程中，開心了想記錄的一些知識點，轉載請附上原文連結 ^V^ 啾咪啾咪

1、 .vue 頁面的代碼，什麼引入啥啥的略過喏

template裡的代碼塊

<el-form-item label="圖檔(270X152)" prop="imgUrl">
        <el-upload
          class="photo-uploader"
          :action="你的位址"
          :data="{index:'all',dir:'newTrh'}  可有可無，看個人所需"
          :show-file-list="false"
          :on-success="handlePhotoSuccess"
          :before-upload="beforePhotoUpload"
          >
          <img v-if="form.imgUrl" :src="form.imgUrl" class="photo">
          <i v-else class="el-icon-plus photo-uploader-icon"></i>
        </el-upload>
      </el-form-item>
           

export default 中 methods裡面的方法

handlePhotoSuccess(res, file) {
      this.newsPhotoPreviewUrl = URL.createObjectURL(file.raw);
      this.form.imgUrl = res.img;
      this.$refs.form.validateField('imgUrl');
},
beforePhotoUpload(file) {
      const isJPG = ~['image/jpeg', 'image/png'].indexOf(file.type)  ;
      const isLt1M = file.size /  1024 / 1024 < 1;

      if (!isJPG) {
        this.$message.error('上傳頭像圖檔隻能是 JPG 格式!');
      }

      if (!isLt1M) {
        this.$message.error('上傳頭像圖檔大小不能超過 1MB!');
      }
      return isJPG && isLt1M;
},
           

2、 重點是這，我想記錄的是背景的儲存方法㖏

采用分子產品管理，使用express的router子產品

multer 子產品得下載下傳安裝哦，npm i multer --save

介紹一下代碼吧：人老了還是要記清楚一點，不然下次忘記了咋整

destination ：回調函數裡面放的是我們存放的位址， ${req.body.dir} 也就是我在上頭.vue 代碼塊裡面說的可有可無看個人所需，這個地方我就需要啦，為什麼呢，因為我希望不同地方上傳的圖檔放在不同檔案夾裡，略略路

filename：檔案名，你可以以你上傳時的名字命名（也就是說如果你上傳的叫，XXX.jpg ,那你儲存的就叫XXX.jpg,但是我不想這麼做，會做解釋），但是我想以時間戳和上傳的額外參數為圖檔名，避免跟别人重複，追求個性，懶懶全部儲存為png格式吧，哼！

作解釋來了，XXX.jpg ，括号裡的命名：callback(null,file.originalname);是不是很簡單，file.originalname這個值就是我們的圖檔上傳前的命名，so easy 

注意：

代碼塊裡的，router.post 那裡哒upload.single('file') 指的是，單檔案，也就是說你如果上傳圖檔隻能上傳一張哦，那我要上傳多張怎麼辦，哈哈哈，換成upload.array('photo',5) 就可以啦，5個數限制，俗稱封頂。

var express = require('express');
var router = express.Router();
var {Friend,News,Pdf} = require('./mongoose');
var timeFilter=require('./news').timeFilter;
var multer=require('multer');
var fileName='';

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, `public/img/${req.body.dir}`)
  },
  filename: function(req,file,callback) {
    fileName=`${Date.now()}-${req.body.index}.png`
    callback(null,fileName);
  }})
var upload = multer({ storage: storage })

router.post('/imgsave',upload.single('file'), function (req, res, next) {
  res.send({'img':`/img/${req.body.dir}/${fileName}`})
});

module.exports = router;
           

再說點什麼呢，這個不僅僅隻能上傳圖檔哦，PDF啥啥旮旯的都可以哦，如果不上傳圖檔，或者想保留字尾，不要全用.png 就不要想我那樣寫死掉，看個人所需，靈活應用

我真棒，我最棒，我是宇宙無敵第一棒，我的畫風有點傻逼，不喜勿噴