需求前因：平常普通的HTML中我們上傳檔案大多在標籤內使用直接submit整個表單，現如今我們不能使用標籤，如何只是用實現上傳檔案呢？
實現需求需要解決的問題：
1.如何在js邏輯中取得檔案？
2.以什麼形式上傳？
3.後臺如何接收？

前臺程式碼：（如何取得檔案實體，以FormData形式用axios上傳）

<template>
    <div>
        <div>
            <input type="file" name="file" accept=".jpg, .jpeg, .png" @change
 
="uploadAvatar">
        </div>
    </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {};
  },
  methods: {
    uploadAvatar(avatar) {
        console.log(avatar.target.files[0])
        let file = avatar.target.files[0]
      let data = new
 
 FormData();
      data.append("file", file, file.name);//很重要 data.append("file", file);不成功
      data.append('data',112)
      console.log(data.get('file'))
      return axios.post("http://127.0.0.1:3000/user/file", data, {
        headers: { "content-type": "multipart/form-data" }
      });
    }
};
</script
 
>

後臺程式碼

//檔案上傳測試
router.post('/file', upload.single('file'), function(req, res) {
    let avatar = req.file
    console.log(avatar)
    console.log(req.body)
    if (avatar) {
        fs.unlink(avatar.path, (e) => {
            if (e) {
                console.log('檔案操作失敗')
                throw e;
            } else
                console.log('檔案:' + avatar.path + '刪除成功！');
        });
    }
    res.status(200).send('上傳成功');
})

upload.single(‘file’)是使用檔案操作中介軟體multer為檔案生成新的檔名與儲存的資料夾

multe檔案儲存與生成新的檔名

   //multer檔案的硬碟儲存模式
var storage = multer.diskStorage({
    destination: function(req, file, cb) {
        //先建立路徑在儲存
        createFileDirectory(uploadPath);
        //指定檔案儲存路徑
        cb(null, 'upload/');
    },
    filename: function(req, file, cb) {
        console.log(file)
            // 將儲存檔名設定為 時間戳 + 檔案原始名，比如 151342376785-123.jpg
        cb(null, Date.now() + '-' + file.originalname);

    }
})

fs建立資料夾

//建立資料夾
var createFileDirectory = function(path) {
        try {
            //檢測資料夾是否存在，不存在丟擲錯誤
            fs.accessSync(path);
        } catch (error) {
            //建立資料夾
            fs.mkdirSync(path);
        }
    }

建立中介軟體

var upload = multer({
    storage: storage
});

結果圖：
上傳頁面

參考連結：
https://www.jb51.net/article/127361.htm