基于Express-Multer上传存储文件后，如何回传给前端？

后端处理方案 #

有两种常用且高效的方式返回视频文件：

1. 静态文件服务推荐

如果你的视频文件存在固定目录（比如./uploads），直接用Express的express.static托管这个目录是最简单的方案，性能也更好：

const express = require('express');
const path = require('path');
const app = express();

// 托管uploads目录，前端通过/videos/文件名访问
app.use('/videos', express.static(path.join(__dirname, 'uploads')));

这样前端直接请求http://你的域名/videos/xxx.mp4就能获取视频文件，无需额外写接口。

2. sendFile接口方案

如果需要做权限校验、动态获取文件路径等逻辑，可以用sendFile写接口：

const express = require('express');
const path = require('path');
const app = express();

app.get('/api/video/:filename', (req, res) => {
  const filename = req.params.filename;
  const filePath = path.join(__dirname, 'uploads', filename);
  
  // 可选：添加权限校验逻辑，比如用户是否有权限访问该视频
  
  res.sendFile(filePath, (err) => {
    if (err) {
      res.status(404).json({ error: '视频文件不存在' });
    }
  });
});

前端React处理 #

核心是给video标签的src设置可访问的视频URL，而非文件内容字符串，示例代码如下：

import { useState, useEffect } from 'react';

const VideoPlayer = () => {
  const [videoSrc, setVideoSrc] = useState('');

  useEffect(() => {
    // 这里假设你已经获取到视频文件名（比如上传后后端返回的文件名，或者从数据库查询）
    const videoFilename = 'my-uploaded-video.mp4';
    // 根据后端方案选择URL
    // 静态服务方案：
    // setVideoSrc(`/videos/${videoFilename}`);
    // sendFile接口方案：
    setVideoSrc(`/api/video/${videoFilename}`);
  }, []);

  return (
    <video controls style={{ width: '100%', maxWidth: '800px' }}>
      <source src={videoSrc} type="video/mp4" />
      你的浏览器不支持HTML5视频播放
    </video>
  );
};

export default VideoPlayer;

关键注意事项 #

• 跨域问题：如果前后端运行在不同端口/域名，需要在Express中配置CORS（比如用cors中间件）
• MIME类型：确保video标签的type属性和视频格式匹配（mp4对应video/mp4，webm对应video/webm等）
• 大视频优化：Express的sendFile和express.static都自动支持HTTP Range请求，浏览器会自动分段加载大视频，无需额外处理
• 路径正确性：后端拼接文件路径时务必用path.join，避免因操作系统路径分隔符不同导致的错误

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