/**
 * 基礎(chǔ)文件上傳
 */
const uploadFile = async () => {
  if (!selectedFile.value) {
    message.value = '請(qǐng)先選擇文件'
    return
  }

  const formData = new FormData()
  formData.append('file', selectedFile.value)

  try {
    message.value = '正在上傳...'
    const res = await axios.post('http://localhost:3000/upload', formData)
    console.log(res.data)
    message.value = `上傳成功: ${res.data.filename}`
  } catch (error) {
    console.log(error)
    message.value = '上傳失敗'
  }
}

const express = require("express");
const app = express();
const cors = require("cors");
// 引入multer
const multer = require("multer");
const fs = require("fs"); 
const path = require("path");

// 修復(fù)cors中間件錯(cuò)誤
app.use(cors());

// 文件保存失敗
const uploadDir = path.join(__dirname, "uploads");
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir);
}

// 這種方式只能仿覆蓋，文件后綴名丟失，無法修復(fù)亂碼問題
// const upload = multer({
//   dest: uploadDir,
// });

// 配置 Multer 存儲(chǔ)引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 修復(fù)文件名亂碼問題
    // Multer 處理 header 時(shí)默認(rèn)用 latin1，需轉(zhuǎn)回 utf8
    const originalName = Buffer.from(file.originalname, "latin1").toString(
      "utf8",
    );
    // 加上時(shí)間戳防止同名文件覆蓋
    cb(null, Date.now() + "-" + originalName);
  },
});
// 這種方式能仿覆蓋，文件后綴名完整，修復(fù)亂碼問題
const upload = multer({ storage: storage });

app.post("/upload", upload.single("file"), (req, res) => {
  res.json({
    msg: "上傳成功",
    filename: req.file.filename,
  });
});

app.listen(3000, () => {
  console.log("Server started on port 3000");
});

// 設(shè)置超時(shí)時(shí)間
server.timeout = 600000;

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'

const selectedFile = ref(null)
const message = ref('')

const uploadFileChange = (e) => {
  selectedFile.value = e.target.files[0]
  message.value = ''
}

const uploadFile = async () => {
  if (!selectedFile.value) {
    message.value = '請(qǐng)先選擇文件'
    return
  }

  const formData = new FormData()
  formData.append('file', selectedFile.value)

  try {
    message.value = '正在上傳...'
    const res = await axios.post('http://localhost:3000/upload', formData)
    console.log(res.data)
    message.value = `上傳成功: ${res.data.filename}`
  } catch (error) {
    console.log(error)
    message.value = '上傳失敗'
  }
}
</script>

<template>
  <div>
    <input type="file" @change="uploadFileChange" />
    <button @click="uploadFile">文件上傳</button>
    <p v-if="message">{{ message }}</p>
  </div>
</template>

<style scoped>
div {
  cursor: pointer;
}
</style>