ExpressJS -如何从前端文件上传FileReader传入writeFile

npm install multer

const express = require('express');
const multer = require('multer');

const app = express();

// 配置上传路径和文件名
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 设置上传文件保存的路径
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname) // 使用原始文件名作为保存的文件名
  }
});

// 创建 multer 实例
const upload = multer({ storage: storage });

// 处理文件上传的路由
app.post('/upload', upload.single('file'), (req, res) => {
  // 文件上传成功后的处理逻辑
  res.send('文件上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

// 假设有一个 input[type="file"] 元素
const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    // 读取完成后发送数据给服务器
    fetch('/upload', {
      method: 'POST',
      body: e.target.result,
      headers: {
        'Content-Type': file.type
      }
    })
    .then(response => response.text())
    .then(data => {
      console.log(data); // 服务器返回的结果
    })
    .catch(error => {
      console.error('发生错误:', error);
    });
  };

  // 读取文件
  reader.readAsArrayBuffer(file); // 或者使用 readAsDataURL(file) 读取为数据 URL
});