最可控的做法是用 fetch 提交 formdata 并解析后端返回的 json 链接字段；传统 iframe 方式因跨域限制、非 html 响应兼容性差、无法监听进度等已被淘汰。
直接用 fetch 提交 FormData，后端返回 JSON 格式链接字段（如 {"url": "https://example.com/uploads/a.png"}），前端解析即可拿到链接——这是最可控、无兼容性陷阱的做法。
为什么不能靠 form.action + target="iframe" 拿链接
传统表单提交后，若用隐藏 iframe 接收响应，需手动解析 iframe 的 contentDocument 或 contents().find("body").text()。但现代浏览器对跨域 iframe、空响应、JSON 响应体的处理极不稳定：Chrome 可能报 Blocked a frame with origin ... from accessing a cross-origin frame；Safari 会静默丢弃非 HTML 响应；如果后端返回纯 JSON（无 HTML 包裹），$(this).contents().find("body") 根本取不到内容。
- 后端必须返回完整 HTML 页面（哪怕只有一行
{"url":"..."}）才能被 iframe 正确加载 - 必须确保前后端同域，否则 DOM 访问被 CORS 阻断
- 无法监听上传进度、无法取消请求、无法统一错误处理
用 fetch + FormData 获取返回链接的正确写法
关键点不是“怎么发”，而是“怎么让后端返回可解析的链接字段”。前端只需构造标准 FormData，不手动设 Content-Type（浏览器会自动加 boundary），然后检查响应状态和 JSON 结构。
- HTML 表单去掉
action和onsubmit，仅作结构容器：<form id="uploadForm"><input type="file" name="file"></form> - JS 中用
new FormData(document.getElementById("uploadForm"))收集文件和其他字段（如description） -
fetch("/api/upload", { method: "POST", body: formData })，不要加headers: { "Content-Type": "multipart/form-data" }（会破坏 boundary） - 后端必须返回
200 OK+Content-Type: application/json，例如：{"success": true, "url": "https://cdn.example.com/abc.jpg"} - 前端用
response.json()解析，再取data.url—— 不要尝试response.text()后手动JSON.parse()，避免空格或 BOM 导致解析失败
后端返回链接时容易忽略的三个细节
前端拿不到链接，90% 是后端没按约定输出。尤其注意：
- PHP 中用
header("Content-Type: application/json; charset=utf-8")显式声明类型，否则 Nginx/Apache 可能默认返回text/html，导致response.json()报错Unexpected token - Node.js（Express + multer）中，
res.json({ url })前确保没有console.log()或其他res.send()调用，否则响应体被提前写入，JSON 会拼接在乱码后面 - Java Spring Boot 中，方法返回类型必须是
@ResponseBody或ResponseEntity<map string>></map>，不能是String（否则会被视作视图名）
真正卡住人的从来不是“怎么发文件”，而是后端返回的响应头是否干净、格式是否严格符合 JSON 规范、链接字段名是否前后端一致。调试时先用 curl 或 Postman 直接调接口，确认返回体是纯 JSON 再查前端逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
