Yeoman Angular Fullstack文件上传至后端功能实现求助

看起来你已经搞定了前端读取文件的部分，接下来咱们一步步把后端和服务层的实现补全。我会推荐标准的FormData上传方案（比直接传ArrayBuffer更稳妥，兼容性也更好），同时也会给出你现有ArrayBuffer方式的适配方案，你可以按需选择。

一、先优化前端代码（可选但推荐） #

你当前用FileReader读取ArrayBuffer的方式没问题，但直接用FormData上传文件会更简洁，不需要手动处理文件读取：

this.$scope.add = function() {
  const fileInput = document.getElementById('resume');
  const f = fileInput.files[0];
  if (!f) {
    alert('请选择要上传的文件');
    return;
  }

  // 构建FormData对象，直接传入文件本身
  const formData = new FormData();
  formData.append('resume', f);

  // 调用服务层方法
  Auth.saveResume(formData)
    .then(() => {
      console.log('文件上传成功！');
      // 这里可以添加成功提示、重置表单等逻辑
    })
    .catch(err => {
      console.error('上传出错了:', err);
      alert('文件上传失败，请稍后重试');
    });
};

二、完善auth.services.ts的saveResume方法 #

不管你用FormData还是ArrayBuffer，都需要在服务层实现请求发送逻辑：

方案1：FormData上传（推荐） #

class Auth {
  // 假设你已经注入了$http服务
  constructor(private $http: ng.IHttpService) {}

  saveResume(formData: FormData) {
    return this.$http.post('/api/auth/resume', formData, {
      // 让Angular不要自动转换请求体
      transformRequest: angular.identity,
      // 让浏览器自动设置正确的Content-Type（包含boundary）
      headers: { 'Content-Type': undefined }
    })
    .then(response => response.data)
    .catch(error => {
      console.error('上传请求失败:', error);
      throw error; // 把错误抛给上层处理
    });
  }

  // 你的其他Auth方法...
}

方案2：适配你现有的ArrayBuffer方式 #

如果你想保留当前读取ArrayBuffer的逻辑，可以这样写：

saveResume(resume: { data: ArrayBuffer, name: string }) {
  return this.$http.post('/api/auth/resume', resume.data, {
    headers: {
      'Content-Type': 'application/octet-stream',
      'X-File-Name': resume.name // 用自定义请求头传递文件名
    }
  })
  .then(response => response.data)
  .catch(error => {
    console.error('上传请求失败:', error);
    throw error;
  });
}

三、后端实现（Express + Multer） #

Yeoman Angular Fullstack的后端基于Express，我们需要用multer中间件处理文件上传（Express默认不支持multipart/form-data类型的请求）。

1. 安装multer依赖 #

npm install multer --save

2. 配置后端路由（server/routes/auth.js） #

const express = require('express');
const router = express.Router();
const multer = require('multer');
const authController = require('../controllers/auth');
const passport = require('passport');

// 配置文件存储规则：存到服务器的uploads目录，文件名加时间戳避免重复
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const fs = require('fs');
    const uploadDir = './uploads';
    // 确保uploads目录存在，否则会报错
    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

// 配置上传限制：最大5MB，只允许PDF/DOC/DOCX文件
const upload = multer({
  storage: storage,
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
  fileFilter: (req, file, cb) => {
    const allowedTypes = [
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    ];
    if (allowedTypes.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('仅支持PDF、DOC、DOCX格式的文件'), false);
    }
  }
});

// 上传路由：需要登录验证，处理名为resume的单个文件
router.post(
  '/resume',
  passport.authenticate('jwt', { session: false }),
  upload.single('resume'),
  authController.saveResume
);

module.exports = router;

3. 实现控制器逻辑（server/controllers/auth.js） #

exports.saveResume = (req, res) => {
  // 上传成功后，multer会把文件信息放到req.file里
  if (!req.file) {
    return res.status(400).json({ message: '未选择要上传的文件' });
  }

  // 这里可以把文件路径保存到当前用户的数据库记录中
  // 假设你用了Mongoose的User模型，且req.user是已登录用户（由passport验证）
  req.user.resumePath = req.file.path;
  req.user.save()
    .then(updatedUser => {
      res.status(200).json({
        message: '文件上传成功',
        filePath: req.file.path,
        fileName: req.file.originalname
      });
    })
    .catch(err => {
      res.status(500).json({ message: '保存用户信息失败', error: err.message });
    });

  // 如果不需要关联用户，直接返回成功即可：
  // res.status(200).json({ message: '文件上传成功', filePath: req.file.path });
};

四、适配ArrayBuffer方式的后端逻辑（可选） #

如果你坚持用ArrayBuffer上传，后端不需要multer，直接读取请求体即可：

router.post(
  '/resume',
  passport.authenticate('jwt', { session: false }),
  (req, res) => {
    const fileName = req.headers['x-file-name'];
    const fileBuffer = req.body; // Express会把raw请求体解析为Buffer
    const fs = require('fs');
    const uploadDir = './uploads';
    
    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
    const filePath = `${uploadDir}/${Date.now()}-${fileName}`;

    fs.writeFile(filePath, fileBuffer, err => {
      if (err) {
        return res.status(500).json({ message: '保存文件失败', error: err.message });
      }

      // 同样可以把路径保存到用户记录
      req.user.resumePath = filePath;
      req.user.save()
        .then(() => {
          res.status(200).json({ message: '文件上传成功', filePath });
        })
        .catch(err => {
          res.status(500).json({ message: '保存用户信息失败', error: err.message });
        });
    });
  }
);

注意事项 #

1. 身份验证：确保上传路由添加了passport.authenticate('jwt')中间件，避免未登录用户上传文件。
2. 文件清理：如果用户多次上传简历，记得删除旧的文件，避免服务器存储冗余。
3. 错误处理：前端和后端都要添加完整的错误捕获逻辑，给用户友好的提示。

内容的提问来源于stack exchange，提问作者MolerC