Angular中如何将PDF文件保存至assets文件夹？

首先得明确一个关键限制：浏览器端的Angular代码无法直接写入项目的assets文件夹——这是浏览器的安全策略决定的，前端JS没有权限访问服务器或本地开发环境的文件系统。assets是项目编译时打包的静态资源目录，要往里面存文件，必须通过后端服务来处理。

下面是具体的解决方案，分开发环境和生产环境两种场景：

一、开发环境：通过Node.js后端实现上传到本地assets目录 #

1. 前端修改：发送文件到后端接口 #

在你的组件中，修改onFileChange方法，用FormData把文件发送到自定义的后端接口：

import { HttpClient } from '@angular/common/http';
// 记得在构造函数注入HttpClient
constructor(private http: HttpClient) {}

onFileChange($event) {
  this.file = $event.target.files[0];
  this.homebrew.controls['file'].setValue(this.file ? this.file.name : '');

  if (!this.file) return;

  // 构建FormData对象
  const formData = new FormData();
  formData.append('pdfFile', this.file, this.file.name);

  // 发送POST请求到后端上传接口
  this.http.post('/api/upload-pdf', formData).subscribe({
    next: (res: any) => {
      console.log('文件已保存到assets', res.filePath);
      // 这里可以把返回的文件路径存起来，后续用来访问该PDF
    },
    error: err => console.error('上传失败', err)
  });
}

2. 后端实现：用Node.js/Express接收并写入assets目录 #

创建一个简单的Node.js服务，用multer中间件处理文件上传：

首先安装依赖：

npm install express multer

然后创建server.js：

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

const app = express();
const PORT = 3000;

// 确保assets/uploaded子目录存在（避免写入失败）
const uploadDir = path.join(__dirname, 'src/assets/uploaded');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, uploadDir),
  filename: (req, file, cb) => {
    // 用时间戳+原文件名避免重复
    const uniqueName = `${Date.now()}-${file.originalname}`;
    cb(null, uniqueName);
  }
});

const upload = multer({ storage });

// 上传接口
app.post('/api/upload-pdf', upload.single('pdfFile'), (req, res) => {
  if (!req.file) return res.status(400).json({ success: false, msg: '未上传文件' });
  
  // 返回前端可访问的文件路径
  const filePath = `/assets/uploaded/${req.file.filename}`;
  res.json({ success: true, filePath });
});

app.listen(PORT, () => console.log(`后端服务运行在http://localhost:${PORT}`));

3. 配置Angular代理（避免跨域） #

在angular.json中添加代理配置，把/api请求转发到后端服务：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "src/proxy.conf.json"
  }
}

创建src/proxy.conf.json：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

现在启动后端服务和Angular项目，上传的PDF就会被保存到src/assets/uploaded目录中。

二、生产环境：推荐单独的上传目录 #

生产环境下，不建议直接写入编译后的dist/assets目录（因为重新部署会覆盖），更好的做法是：

• 在服务器上创建一个独立的上传目录（比如/var/www/uploads）
• 配置服务器（Nginx/Apache）把该目录映射为静态资源路径（比如/uploads）
• 后端把文件保存到这个目录，前端通过/uploads/xxx.pdf访问

关键注意事项 #

• 权限问题：后端服务运行的用户需要有目标目录的写入权限，否则会报错。
• 文件命名：一定要处理文件名重复的问题（比如加时间戳），避免覆盖已有文件。
• 静态资源刷新：开发环境下Angular DevServer会自动监视assets目录变化，上传后会自动刷新；生产环境需要确保服务器能正确访问上传目录。

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