uni-halo/.agents/skills/uniapp-project/references/components/uni-ui/uni-file-picker.md

uni-file-picker

Instructions

组件名：uni-file-picker

代码块： uFilePicker

点击下载&安装

Syntax

• 使用 <uni-file-picker />（或 <uni-file-picker></uni-file-picker>，当需要包裹子节点时）。
• 遇到平台差异时，建议使用条件编译（#ifdef / #endif）显式处理。

Properties

属性名	类型	默认值	可选值	说明
v-model/value	Array\Object	-	-	组件数据，通常用来回显 ,类型由 return-type 属性决定 ， 格式见下文
disabled	Boolean	false	-	组件禁用
readonly	Boolean	false	-	组件只读，不可选择，不显示进度，不显示删除按钮
return-type	String	array	array/object	限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
disable-preview	Boolean	false	-	禁用图片预览，仅 mode:grid 生效
del-icon	Boolean	true	-	是否显示删除按钮
auto-upload	Boolean	true	-	是否自动上传，值为 false 则只触发@select,可自行上传
limit	Number\String	9	-	最大选择个数 ，h5 会自动忽略多选的部分
title	String	-	-	组件标题，右侧显示上传计数
mode	String	list	list/grid	选择文件后的文件列表样式
file-mediatype	String	image	image/video/all	选择文件类型,all 只支持 H5 和微信小程序平台
file-extname	Array\String	-	-	选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 file-mediatype 属性而不同
list-styles	Object	-	-	mode:list 时的样式
image-styles	Object	-	-	mode:grid 时的样式
sizeType	Array	['original', 'compressed']	'original', 'compressed'	original 原图，compressed 压缩图，默认二者都有
sourceType	Array	['album', 'camera']	'album', 'camera'	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
dir	String	"/"	-	需要上传到的文件夹，默认为 "/" ,即上传到根目录

Events

事件称名	说明	返回值
@select	选择文件后触发	见下文
@progress	文件上传时触发	见下文
@success	上传成功触发	见下文
@fail	上传失败触发	见下文
@delete	文件从列表移除时触发	见下文

Platform Compatibility

See official docs for platform support table: https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

Examples

Example (Example 1)

<uni-file-picker 
	v-model="imageValue" 
	fileMediatype="image" 
	mode="grid" 
	@select="select" 
	@progress="progress" 
	@success="success" 
	@fail="fail" 
/>
<script>
	export default {
		data() {
			return {
				imageValue:[]
			}
		},
		methods:{
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			}
		}
	}
</script>

Example (Example 2)

<uni-file-picker 
	v-model="imageValue" 
	fileMediatype="image" 
	mode="grid" 
	@select="select" 
	@progress="progress" 
	@success="success" 
	@fail="fail" 
/>
<script>
	export default {
		data() {
			return {
				imageValue:[]
			}
		},
		methods:{
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			}
		}
	}
</script>

Example (Example 3)

<uni-file-picker 
	v-model="imageValue"  
	file-mediatype="image"
	mode="grid"
	file-extname="png,jpg"
	:limit="1"
	@progress="progress" 
	@success="success" 
	@fail="fail" 
	@select="select"
/>

Example (Example 4)

<uni-file-picker 
	v-model="imageValue"  
	file-mediatype="image"
	mode="grid"
	file-extname="png,jpg"
	:limit="1"
	@progress="progress" 
	@success="success" 
	@fail="fail" 
	@select="select"
/>

Example (Example 5)

<template>
	<view>
		<uni-file-picker  ref="files" :auto-upload="false"/>
		<button @click="upload">上传文件</button>
	</view>
</template>
<script>
	export default {
		data() {},
		methods:{
			upload(){
				this.$refs.files.upload()
			}
		}
	}
</script>

Example (Example 6)

<template>
	<view>
		<uni-file-picker  ref="files" :auto-upload="false"/>
		<button @click="upload">上传文件</button>
	</view>
</template>
<script>
	export default {
		data() {},
		methods:{
			upload(){
				this.$refs.files.upload()
			}
		}
	}
</script>

Reference:

• Official Documentation
• Plugin Marketplace
• Local Example