微博H5页面无法直接上传图片发博,必须通过开放平台API实现:先审核应用并获取write权限,用户OAuth2授权后持access_token调用upload_batch上传图片获media_ids,再用statuses/update发博;前端需自行完成选图、排序、canvas压缩(注意兼容性)及顺序上传,不可并发;所有请求须后端代理或签名,且需校验token有效性。
微博官方没有开放 H5 端的图片上传和发博接口给普通开发者。所谓“微博 HTML5 版本发带图微博”,实际只能靠 window.open 跳转到微博官方 H5 发博页(https://weibo.cn/compose/ 或新版 https://m.weibo.cn/compose),并携带预填文字参数 —— 但图片无法通过 URL 参数传入,更不支持多图、顺序控制或压缩。
真正可控的方案只有接入微博开放平台的 statuses/upload_url_text(单图)或 statuses/upload_batch(多图)接口,但前提是:
write 权限access_token
注意:statuses/upload_batch 接口返回的 media_ids 是按上传顺序排列的,但微博前端最终展示顺序取决于客户端解析逻辑 —— 实测中,只要按目标顺序依次调用上传,生成的 media_ids 数组传给 statuses/update,微博 App 和 H5 页面基本会保持该顺序。
微博 H
5 发博页不提供 JS SDK 图片处理能力。如需压缩+排序,必须在你自己的页面完成:
input[type="file"] 多选图片,获取 FileList 后手动排序(比如按文件名、拖拽顺序或用户点击顺序存索引)canvas 压缩:设置最大宽高(如 1242px)、质量(0.8),注意 iOS Safari 对 canvas.toBlob 兼容性差,建议 fallback 到 toDataURL + base64 解码再构造 Blob/upload_batch 接口(不可并发,否则 media_id 顺序错乱)fetch('https://api.weibo.com/2/statuses/upload_batch.json', {
method: 'POST',
headers: { 'Authorization': `Bearer ${access_token}` },
body: new FormData().append('pic', blob1).append('pic', blob2)
})
实操中最容易翻车的是这几点:
canvas.toDataURL('image/jpeg') 在部分安卓 WebView 中强制转成 PNG,导致体积暴增且无提示input.files 的顺序不等于选择顺序(尤其 macOS Finder 多选),必须用 dataTransfer.items 或监听 change 时记录点击序列access_token 默认 24 小时过期,且微博不支持静默刷新;若用户长时间停留页面,发博前务必检查 token 有效性真正的难点不在“怎么发”,而在“怎么让整个链路稳定、可控、不丢图、不错序”——尤其是图片从用户设备出来,到微博服务器落库,中间每一步都可能被截断或重排。别迷信“H5 页面跳转就能搞定”,那只是发纯文字微博的快捷方式。