H5端uni.chooseImage返回blob URL而非真实文件路径，需用res.tempFiles[0]获取原生File对象并通过FormData上传；uni.uploadFile在H5对formData兼容性差，建议H5用fetch+FormData，其他端用uni.uploadFile实现跨端统一。
uni-app H5端uni.chooseImage返回路径不是真实URL
在H5端调用 uni.chooseImage 后，tempFilePaths[0] 返回的是类似 blob:http://localhost:8080/xxx 的临时地址，而非可直接上传的文件对象或 base64。后端通常不接受 blob URL，直接传过去会 400 或 404。
根本原因：H5 环境下 uni.chooseImage 底层走的是 input[type="file"]，但 uni-app 封装后只暴露了临时路径，没透出原始 File 对象。
- 必须手动从
tempFiles中提取原生File对象（H5 下tempFiles是真实File实例数组，而其他平台是纯对象） - 不要拼接
tempFilePaths[0]去发请求 —— 它只是浏览器内部引用，服务端无法访问 - 上传时需用
FormData追加File，而不是传字符串路径
uni.chooseImage({
count: 1,
success: (res) => {
// ✅ 正确：H5 下 res.tempFiles[0] 是 File 实例
const file = res.tempFiles[0];
const formData = new FormData();
formData.append('file', file); // 注意：key 名需和后端约定一致
<pre class="brush:php;toolbar:false;">uni.uploadFile({
url: 'https://api.example.com/upload',
filePath: '', // ❌ 这里不能填 tempFilePaths[0]
name: 'file', // ✅ 必须与 FormData.append 的 key 一致
formData,
success: console.log,
fail: console.error
});
} });
H5端uni.uploadFile不支持formData参数？
官方文档写支持 formData，但实测 H5 端（尤其旧版 uni-app 或某些浏览器）对 formData 兼容性差，容易静默失败或字段丢失。这不是 bug，而是底层依赖的 XMLHttpRequest 对 FormData 的处理逻辑和小程序环境不同。
- 优先检查 uni-app 版本：2.9.13+ 对 H5 的
formData支持更稳；低于此版本建议降级方案 - 若发现后端收不到
formData字段（如 token、type），说明 H5 没真正把它们塞进请求体 —— 此时应改用header传非文件字段 - 文件字段仍必须走
FormData，但文本字段尽量挪到header或 URL query 中
例如后端需要校验 token 和 category：
// ✅ 推荐：token 放 header，category 放 query
uni.uploadFile({
url: 'https://api.example.com/upload?category=image',
filePath: '', // 空，因已用 formData
name: 'file',
formData: { /* 空或仅放必须和文件同体的字段 */ },
header: {
'Authorization': 'Bearer ' + token,
// ❌ 不要在 formData 里塞 token，H5 可能丢
}
});
如何统一多端写法避免H5特殊处理？
写两套逻辑（H5 用 File + FormData，App/小程序用 filePath）极易出错。真正可行的统一方案，是「始终用 tempFiles 提取原生对象」，并封装一个跨端上传函数。
-
tempFiles在 App 和小程序中是模拟对象（含name,size,type），H5 中是真实File—— 二者都具备上传所需元信息 - 关键差异只在「怎么传给后端」：H5 必须用
FormData+XMLHttpRequest或fetch；其他端可用uni.uploadFile - 别试图让
uni.uploadFile在 H5 负责一切；遇到兼容问题，H5 单独走fetch更可控
最小化封装示例：
function uploadFile(file) {
if (uni.getSystemInfoSync().platform === 'h5') {
const formData = new FormData();
formData.append('file', file);
return fetch('https://api.example.com/upload', {
method: 'POST',
body: formData,
headers: { 'X-Requested-With': 'XMLHttpRequest' } // 防止被拦截
});
} else {
return uni.uploadFile({
url: 'https://api.example.com/upload',
filePath: file.path || file.tempFilePath,
name: 'file'
});
}
}
微信浏览器里uni.chooseImage选图后tempFiles为空？
这是微信内置浏览器（尤其是 iOS 微信）的常见限制：它会阻止非 HTTPS 页面访问本地文件系统，即使页面是 HTTPS，也可能因 UA 检测或安全策略导致 tempFiles 数组为空、tempFilePaths 为 blob 但无法读取内容。
- 先确认当前环境是否 HTTPS：非 HTTPS 下微信 H5 几乎必然失败，且无明确报错
- 检查是否启用了「相机/相册」权限：微信需用户手动授权，首次调用可能静默拒绝
- 不要依赖
tempFilePaths的长度判断成功 —— 微信下它可能有值（blob URL），但对应tempFiles为空，此时实际没拿到文件对象 - 加一层 fallback：若
res.tempFiles?.length === 0，提示“请在微信中点击右上角 → 在浏览器中打开”或引导使用系统浏览器
真正的健壮性不在代码多绕几层，而在清楚知道微信 H5 的边界在哪 —— 它不是标准浏览器，很多 File API 行为不可预测。
