利用Vue3+Nodejs实现文件上传入门篇

/**
 * 基础文件上传
 */
const uploadFile = async () => {
  if (!selectedFile.value) {
    message.value = '请先选择文件'
    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");

// 修复cors中间件错误
app.use(cors());

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

// 这种方式只能仿覆盖，文件后缀名丢失，无法修复乱码问题
// const upload = multer({
//   dest: uploadDir,
// });

// 配置 Multer 存储引擎
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    // 修复文件名乱码问题
    // Multer 处理 header 时默认用 latin1，需转回 utf8
    const originalName = Buffer.from(file.originalname, "latin1").toString(
      "utf8",
    );
    // 加上时间戳防止同名文件覆盖
    cb(null, Date.now() + "-" + originalName);
  },
});
// 这种方式能仿覆盖，文件后缀名完整，修复乱码问题
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");
});

// 设置超时时间
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 = '请先选择文件'
    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>