Node.js后端搭配Angular前端实现图片上传后文件读取问题咨询

现有逻辑合理性判断 #

你的基础实现逻辑没有原则性问题，Angular前端和Node.js后端本身就是独立的两个服务，目录天然隔离。ng serve开发阶段能正常访问文件，是因为Angular开发服务默认配置了跨域代理，打包后失去了开发环境的代理能力，自然无法直接读取Node.js服务侧的文件。

两种方案选型建议 #

• 优先选择：通过HTTP请求读取Node.js存储的文件
  这是生产环境的标准实现方案，你只需要在Node.js服务端新增静态资源托管规则，把存储上传文件的目录设置为公开可访问的静态资源路径即可，以Express框架为例，参考代码如下：

  const express = require('express');
  const app = express();
  // 托管上传目录为静态资源路径
  app.use('/uploads', express.static('存储上传文件的本地uploads目录绝对路径'));
  

  配置完成后，Angular侧直接使用Node.js服务域名/uploads/文件名的完整路径即可访问资源，无需修改原有上传逻辑。后续如果要迁移到对象存储、CDN等服务也不需要调整整体架构，还可以灵活扩展权限校验、流量控制等能力。

• 不建议选择：将文件上传到Angular的assets目录
  该方案仅可用于本地临时测试，完全不适用生产环境：

  • assets目录属于Angular构建产物的一部分，每次执行ng build重新打包时都会覆盖整个目录，已上传的文件会全部丢失
  • 生产环境Angular的静态资源一般部署在CDN或Nginx静态目录下，默认没有写入权限，无法接收上传文件
  • 前后端目录高度耦合，后续拆分部署、服务扩容都会出现兼容性问题

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