前端需用后端返回的完整HTTP URL（如request()->domain().'/uploads/'.$info->getSaveName()）设置img.src，而非本地路径；Nginx/Apache须配置/uploads/为可访问目录，Windows下需将反斜杠替换为正斜杠。
上传后前端如何拿到预览 URL
ThinkPHP 上传成功后默认只返回本地路径（如 public/uploads/2024/05/file.jpg），但浏览器无法直接访问该路径——因为它是相对服务器文件系统的位置，不是可访问的 HTTP 地址。必须手动拼出能被浏览器请求的 URL。
常见错误是直接把 $info->getSaveName() 或 $info->getFilename() 当作 URL 返回，结果前端 img.src 指向 404。
- 后端返回时，用
request()->domain() . '/uploads/' . $info->getSaveName()（假设你把文件存到了public/uploads/） - 更稳妥的做法是统一用
url()辅助函数：先配置好路由或静态资源路径，再返回url('static/uploads/' . $info->getSaveName()) - 如果用了自定义上传驱动（如阿里云 OSS），
$info->getUrl()可能已内置返回公网 URL，此时直接取用即可，不用拼接
为什么 moveTo() 后前端仍看不到图
根本原因不是 PHP 没传过去，而是 Web 服务器（Nginx/Apache）没把上传目录设为可公开访问。ThinkPHP 的 moveTo() 只负责写文件，不改权限、不配路由、不开放 HTTP 入口。
典型表现：curl 能取到文件内容，但浏览器打开 URL 显示 403 或 404。
立即学习“PHP免费学习笔记（深入）”；
- Nginx 下确保
location /uploads/块存在且 root 指向public目录（不是项目根目录） - Apache 需确认
.htaccess没拦截uploads/子目录，或在public/.htaccess中加白名单规则 - Windows 系统要注意路径分隔符，
getSaveName()返回的是2024 ile.jpg，但 URL 必须用正斜杠/，需用str_replace('\', '/', $info->getSaveName())处理
前端预览逻辑怎么接住后端返回的 URL
别在表单 submit 后跳转页面，要用 AJAX 上传并手动设置 img.src。Form 表单默认提交会刷新，预览瞬间就没了。
关键点在于「上传完成」和「URL 可用」之间不能有延迟或异步错位。
- 用
FormData+fetch或axios.post()提交，响应体里必须包含字段如{ code: 1, data: { url: 'https://xxx.com/uploads/xxx.jpg' } } - 拿到响应后立刻赋值：
document.getElementById('preview').src = res.data.url，不要等 DOM 重绘或加 timeout - 如果上传多个文件，后端应返回数组，前端用
forEach动态创建img标签并插入容器，避免覆盖
安全边界：哪些文件类型真能预览
不是所有上传成功的文件都能被浏览器渲染。前端 <img alt="ThinkPHP如何实现上传文件的即时预览_前后端数据交互指南" > 只支持 jpg/jpeg/png/gif/webp，<video></video> 支持 mp4/webm，PDF 需要 <embed></embed> 或后台转缩略图。ThinkPHP 的 validate(['type' => 'image']) 只校验 MIME，不等于能预览。
- 后端校验要双保险：既用
validate(['ext' => 'jpg,png,gif'])，也检查$file->getMime()是否匹配（防伪造后缀） - 返回 URL 前，建议后端补一个
isPreviewable字段，例如：'is_previewable' => in_array($ext, ['jpg','jpeg','png','gif','webp']) - 前端根据该字段决定渲染
<img alt="ThinkPHP如何实现上传文件的即时预览_前后端数据交互指南" >还是提示“暂不支持在线预览”，而不是让img.onerror被动触发 fallback
