手动触发上传需设:auto-upload="false"并用ref.upload();微信小程序header受限,推荐token放formData;单选需return-type="object";预览黑屏因直接渲染tempFilePath,应调用uni.previewImage。

uni-file-picker 选文件后不自动上传,怎么手动触发?
默认情况下 uni-file-picker 会选完就发请求,但多数真实场景(比如要校验图片尺寸、加 token、拼接 formData)都需要你控制上传时机。关键就是关掉自动上传,再用 ref 调 upload() 方法。
- 必须设置
:auto-upload="false",否则upload()调了也没用 -
ref要写在组件上,且确保组件已挂载(onMounted或点击时再调) - 上传前记得检查
v-model绑定的数组是否非空,否则会静默失败
示例:
<uni-file-picker ref="picker" :auto-upload="false" v-model="fileList" />
<button @click="submit">确认上传</button>
<script setup>
const picker = ref()
const fileList = ref([])
function submit() {
if (fileList.value.length === 0) return
picker.value.upload() // 这里才真正发起请求
}
</script>
上传到不同平台(微信小程序/H5/App)为什么 header 没生效?
因为 uni.uploadFile 底层对各端支持不一致:header 在 H5 和 App 端完全可用,但在微信小程序里只支持部分字段(如 Authorization),且必须是合法 header 名;更常见的是 token 放在 formData 或 URL 参数里才稳定。
- 微信小程序中,
header.Authorization需要服务端开启 CORS 白名单,否则被拦截 - H5 端若用
FormData上传,header会被忽略,必须走uni.uploadFile原生接口 - 推荐统一做法:token 放
formData.token,服务端统一读取,避免平台差异
限制只能选一张 JPG/PNG 图片,但用户还能点多次?
只靠 :limit="1" 不够——它只限制“一次最多选几个”,不限制“能不能重复选”。用户点第二次,旧文件会被替换,但 UI 上没反馈,体验像没响应。要真做到“单选+可重选”,得组合配置。
- 必须加
return-type="object",这样v-model绑定的是单个对象而非数组,重选即覆盖 - 去掉
del-icon(设为false)和disable-preview(设为true),避免用户误操作 - 如果希望点击已选图片能重新选择,别禁用预览,而是监听
@select并清空再触发选择逻辑(需配合ref的clear()方法)
选完图片预览是黑的或打不开?
常见于 Android App 或某些 H5 环境,本质是临时路径(tempFilePath)被当成绝对路径直接渲染,而实际它只是沙盒内一个临时缓存地址,不能直接当 src 用。
- 图片预览必须用
uni.previewImage({ urls: [tempFilePath] }),不能直接<image :src="tempFilePath"> - 如果要用
<image>回显,得先用uni.getFileSystemManager().readFile转成 base64(仅小图适用,大图卡顿) - 九宫格模式(
mode="grid")下,组件内部已处理路径转换,一般不会出问题;列表模式(mode="list")则容易漏掉这步
最稳妥的做法:信任 uni-file-picker 自带的预览逻辑,别自己接管 tempFiles 渲染,除非有强定制需求。










