Angular 5前端上传HTML5 Video后显示空白的异常问题求助

我之前也踩过类似的坑，咱们一步步拆解可能的问题点和解决办法：

最可能的原因：Angular静态资源配置未包含上传目录 #

Angular的开发服务器（ng serve）在启动时会扫描配置好的assets目录，将这些目录下的文件映射为可访问的静态资源。如果你的上传目录没加到assets配置里，运行时新上传的文件不会被服务器识别，只有重启项目重新扫描后才能访问。

解决步骤： #

1. 打开项目根目录下的angular.json文件

2. 找到projects -> [你的项目名] -> architect -> build -> options -> assets配置项

3. 添加你的上传目录配置，比如：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     // 新增这一行，适配你的上传目录路径
     {"glob": "**/*", "input": "./uploads", "output": "/uploads/"}
   ]
   

   • input：你的上传文件夹的实际路径（比如项目根目录下的uploads，或者src/assets/uploads）
   • output：前端访问时的路径前缀（比如/uploads/，这样视频的src就是/uploads/xxx.mp4）

4. 保存配置后重启ng serve，之后新上传的视频应该能直接在前端显示了。

其他可能的排查方向 #

• 直接验证视频URL可访问性：上传完成后，在浏览器地址栏直接输入视频的完整URL（比如http://localhost:4200/uploads/your-video.mp4），如果此时返回404，重启后能访问，那肯定是静态资源配置的问题。
• 路径格式检查：确认MongoDB存储的路径是相对服务器的路径（比如/uploads/xxx.mp4），而不是本地绝对路径（比如C:/projects/app/uploads/xxx.mp4）——前端无法直接访问本地文件系统路径。
• 文件权限问题：确保上传后的视频文件权限设置正确，Angular服务器进程有读取该文件的权限（比如Linux/macOS下设置chmod 644，Windows下检查文件是否被锁定）。

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