视频上传需前端js校验type与后缀、预检size并匹配后端配置，fetch传formdata时禁设content-type，动态创建video标签须加controls和preload="metadata"，后端必须正确配置cors响应头。
直接用 <input type="file"> 配合 FormData + fetch 就能完成，但 90% 的失败不是代码写错，而是后端没配好或前端漏了关键约束。
accept="video/*" 只是提示，必须 JS 校验 type 和后缀
浏览器的 accept="video/*" 不阻止用户手动改后缀或伪造 MIME 类型。真正有效的校验得靠 JavaScript：
- 检查
file.type.startsWith("video/")，比如"video/mp4"、"video/webm"是合法的，"application/octet-stream"或空字符串就得拦截 - 同时读取
file.name，用正则匹配常见视频后缀：/\.(mp4|webm|mov|avi|mkv)$/i - 如果两者都不匹配，直接
return并提示“请选择有效视频文件”，别传给后端浪费请求
大视频上传前必须预检 size，否则请求直接 413
用户选个 2GB 的 MOV 文件，前端不拦，fetch 发出去大概率卡住几秒然后报 NetworkError 或后端返回 413 Request Entity Too Large。这不是 JS 错，是 Nginx / Apache / 后端框架默认限制太小：
- 前端加体积判断：
if (file.size > 500 * 1024 * 1024) { alert("视频不能超过 500MB"); return; } - 这个阈值要和后端配置对齐：Nginx 需设
client_max_body_size 1024m;，Express + multer 要配limits: { fileSize: 1024 * 1024 * 1024 } - 别信“用户不会传那么大”——测试时真有人拖一个 4K 时间轴导出的 .mov 进来
用 fetch + FormData 上传时，绝不能手动设 Content-Type
FormData 会自动生成带 boundary 的 multipart/form-data 头，你一设 headers: { "Content-Type": "multipart/form-data" }，边界就丢了，后端 multer、SpringMVC 全部收不到文件，日志里只看到空 body。
- 正确写法：只传
body: formData，其他啥都不设 - 字段名（如
formData.append("video", file)中的"video"）必须和服务端解析逻辑一致，比如 Express 用multer.single("video")，Java Spring 用@RequestParam("video") MultipartFile file - Chrome 下本地
file://协议会静默拒绝fetch上传，务必起http-server或用 VS Code Live Server 测试
上传成功后插入 video 标签，注意 controls 和 preload
后端返回视频 URL（如 "https://cdn.example.com/uploads/abc123.mp4"）后，动态插入播放器时容易忽略两个细节：
- 一定要加
controls属性，否则用户点不开；加preload="metadata"能让浏览器只加载头信息，避免一插入就触发整段下载 - 如果后端返回的是相对路径，需补全为绝对 URL，否则跨域或子路径下
src会 404 - 别用
innerHTML = "<video src="..."></video>"，用 DOM 方法创建更安全：const v = document.createElement("video"); v.src = url; v.controls = true; v.preload = "metadata"; container.appendChild(v);
最常被跳过的其实是后端配置和跨域响应头——前端代码跑通了，但 fetch 看似没报错却收不到响应，八成是后端没返回 Access-Control-Allow-Origin 或 Access-Control-Allow-Methods: POST，尤其当带凭证（cookie）时还不能用 *。这点不查 Network 面板里的 Response Headers，光看 JS 控制台永远找不到根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
