同一Docker网络下前端容器如何访问API容器内multer上传的文件

有两种常用的实现路径，根据你的业务场景选择即可： #

路径1：Express API直接托管上传目录（成本最低） #

这个方案不需要改Docker配置，只需要修改你的Express服务代码：

• 找到你multer配置的上传文件存储目录，比如你存在项目根目录下的./uploads文件夹
• 在Express的启动代码里加一行静态资源托管的逻辑：

// 路径对应你multer配置的dest/storage的存储路径
app.use('/uploads', express.static(path.join(__dirname, 'uploads')))

• 访问逻辑分两种场景：
  • 前端代码跑在用户浏览器侧（普通SPA应用）：直接拼接地址 http://<你的服务器公网IP/域名>:8383/uploads/<后端返回的文件名> 访问即可，你已经把api容器的8383端口映射到宿主机了，公网可以直接访问
  • 前端容器内部服务端请求（比如SSR场景下的服务端接口调用）：两个容器同属pms自定义网络，可以直接用Docker的服务名解析访问，地址为 http://api:8383/uploads/<文件名>

路径2：用Docker共享卷持久化+共享文件（适合生产环境） #

你当前的配置没有做持久化，api容器删除重建后所有上传的文件都会丢失，生产环境推荐用这个方案：

1. 修正你的docker-compose.yml缩进错误，新增共享卷配置，修改后的完整配置如下：

version: '2'
services:
  api:
    container_name: "api"
    restart: always
    build:
      context: ./api
    ports:
      - "8383:8383"
    environment:
      - test=testvalue
    # 把共享卷挂载到api的上传目录，替换为你实际的multer存储路径
    volumes:
      - upload_files:/usr/src/app/uploads
    networks:
      - pms

  app:
    container_name: "app"
    restart: always
    build:
      context: ./app
    ports:
      - "7777:80"
    environment:
      - test=testvalue
    # 如果需要前端服务直接托管上传文件，就加这个挂载，否则可以去掉
    volumes:
      - upload_files:/usr/share/nginx/html/uploads
    networks:
      - pms

volumes:
  upload_files:
networks:
  pms:

2. 如果你加了前端的卷挂载，前端可以直接用自己的端口访问文件：http://<服务器IP>:7777/uploads/<文件名>，不需要走API服务的端口

注意事项 #

• 如果是浏览器侧跨端口访问，记得在Express里配置CORS，允许前端的7777域名/端口跨域
• multer存储文件时建议生成随机文件名，避免重名覆盖，同时把文件名返回给前端存储，后续拼接访问地址
• 不要在上传文件名里使用中文或者特殊符号，避免编码问题导致404

内容的提问来源于stack exchange，提问作者Lwazi Ciniso Dlamini