文件上传成功后自动生成分享链接或二维码，核心是服务端生成唯一访问路径并提供二维码接口，前端调用获取并渲染；需确保链接长期有效、可传播，并支持复制、保存等交互优化。
文件上传成功后自动生成分享链接或二维码，核心是「服务端生成唯一访问路径 + 前端调用接口获取并渲染」。H5 本身无法直接生成可公开访问的链接或二维码，必须依赖后端配合。
1. 后端需提供两个关键能力
这是整个流程的前提，前端只是调用者：
-
文件存储后返回可公开访问的 URL：比如上传到对象存储（OSS、S3、七牛云等），服务端返回类似
https://cdn.example.com/files/abc123.pdf的直链； -
提供二维码生成接口（或支持参数化）：例如
/api/qrcode?url=https%3A%2F%2Fcdn.example.com%2Ffiles%2Fabc123.pdf，后端接收 URL 参数，返回 base64 图片或图片地址。
2. 前端上传成功后触发生成逻辑
以常见的 axios + canvas 二维码库（如 qrcode.js）为例：
- 监听上传接口的响应，拿到服务端返回的文件访问链接；
- 用该链接请求后端二维码接口，或直接用前端库生成（注意：纯前端生成的二维码只含链接，不解决链接有效性问题）；
- 将生成的二维码 base64 数据渲染到
<canvas></canvas>或<img>标签中。
示例片段（简化）：
// 上传成功回调
uploadFile().then(res => {
const fileUrl = res.data.url; // 如 https://cdn.example.com/xxx.jpg
// 方式一：调用后端二维码接口
fetch(`/api/qrcode?url=${encodeURIComponent(fileUrl)}`)
.then(r => r.json())
.then(data => {
document.getElementById('qrcode').src = data.qrCodeBase64;
});
// 方式二：前端生成（需确保链接长期有效）
QRCode.toDataURL(fileUrl).then(url => {
document.getElementById('qrcode').src = url;
});
});
3. 分享链接要“可传播”，不能只是临时地址
很多开发者忽略这点：上传返回的链接如果是带临时 token 或短时效签名（如 1 小时过期），分享出去很快失效。务必确认：
- 链接是否长期有效（建议设置为 public 读权限）；
- 是否需要服务端做一层跳转或统计（如
/s/xyz123→ 302 到真实地址），这样更可控、可追踪； - 若涉及用户隐私，分享链接应绑定权限校验（如分享口令、有效期、下载次数限制），这些逻辑必须在服务端实现。
4. H5 页面中展示与分享优化
生成后不只是显示，还要方便用户操作：
- 点击二维码可保存图片（调用
canvas.toBlob()+saveAs）； - 提供“复制链接”按钮（用
navigator.clipboard.writeText()）； - 微信内建议加「长按识别二维码」提示；
- 避免在二维码里塞太大内容（如超长 URL），影响识别率——服务端用短链映射更稳妥。
