node+express+axios實現單檔案上傳功能

cnpm i multer --save

var express = require('express');
var router = express.Router();

//上傳商品圖片
var multer = require('multer');
var fs = require('fs');
var path = require('path');

 //使用表單上傳
var upload = multer({
  storage: multer.diskStorage({
    //設定檔案儲存位置
     destination: function(req, file, cb) {
       let date = new Date();
       let year = date.getFullYear();
       let month = (date.getMonth() + 1).toString().padStart(2, '0');
       let day = date.getDate();
       //直接從根目錄開始找
       let dir = "./public/uploads/" + year + month + day;
 
       //判斷目錄是否存在，沒有則建立
       if (!fs.existsSync(dir)) {
         fs.mkdirSync(dir, {
           recursive: true
         });
       }
 
       //dir就是上傳檔案存放的目錄
       cb(null, dir);
     },
     //設定檔名稱
     filename: function(req, file, cb) {
       let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
       //fileName就是上傳檔案的檔名
       cb(null, fileName);
     }
  })
})

    //介面地址為:admin/upload/img   根據自己的路由設定來寫
 router.post('/img',upload.single("imgFile") ,function(req,res,next){
    console.log(req);
    res.json({
      file: req.file
    })
 })


module.exports = router;

<template>
  <div>
        <div>
            <img :src="url" width="100px">
             <!-- input type屬性為file,限制上傳為檔案 -->
            <input type="file" @change="uploadImg($event)">
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            url : ''
        }
    },
    methods:{
        uploadImg(e){
            let file = e.target.files[0];
            // console.log(file);
            //限制檔案大小
            // if(file.size > 10240){
            //     alert('檔案大小過大');
            // }

            //限制檔案型別
            if(!file.type.startsWith('image')){
                alert('只能上傳圖片');
                return
            }
            let formData = new FormData();
            formData.set('imgFile',file);
            this.$axios.post(
                'http://127.0.0.1:3000/admin/upload/img',
                formData
                ).then(req => {
                    // console.log(req.data.file.path);
                    let path = req.data.file.path;   //獲取檔案路徑
                    // path.indexOf('\');
                    let imgUrl = path.substring(path.indexOf('\'))
                    // console.log(imgUrl);
                    //   拿到的圖片路徑為uploads20201119imgFile-1605779882999.jpg
                    this.url = 'http://127.0.0.1:3000'+imgUrl;   //我們最後要在伺服器端拿到圖片，要拼接上自己的伺服器的地址
                })
        }
    }
}
</script>

<style>

</style>