mxx 16c3f11bc4 前端孟祥旭 3 years ago
..
components 16c3f11bc4 前端孟祥旭 3 years ago
changelog.md 16c3f11bc4 前端孟祥旭 3 years ago
package.json 16c3f11bc4 前端孟祥旭 3 years ago
readme.md 16c3f11bc4 前端孟祥旭 3 years ago

readme.md

FilePicker 文件选择上传

组件名:uni-file-picker 代码块: uFilePicker

文件选择上传组件,可以选择图片、视频等任意文件并上传到当前绑定的服务空间

注意事项 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。

  • 组件需要依赖 sass 插件 ,请自行手动安装
  • 如不绑定服务空间,autoUpload默认为false且不可更改
  • 选择文件目前只支持 H5微信小程序平台 ,且 微信小程序平台 使用 wx.chooseMessageFile()
  • 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839

API

FilePicker Props

属性名 类型 默认值 可选值 说明
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 - 是否自动上传,值为true则只触发@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 时的样式

value 格式

三个属性必填,否则影响组件显示

[
	{
		"name":"file.txt",
		"extname":"txt",
		"url":"https://xxxx",
		// ...
	}
]

list-styles 格式

{
	"borderStyle":{
		"color":"#eee",		// 边框颜色
		"width":"1px",		// 边框宽度
		"style":"solid", 	// 边框样式
		"radius":"5px" 		// 边框圆角,不支持百分比
	},
	"border":false, // 是否显示边框
	"dividline":true // 是否显示分隔线
}

image-styles 格式

{
	"height": 60,	// 边框高度
	"width": 60,	// 边框宽度
	"border":{ // 如果为 Boolean 值,可以控制边框显示与否
		"color":"#eee",		// 边框颜色
		"width":"1px",		// 边框宽度
		"style":"solid", 	// 边框样式
		"radius":"50%" 		// 边框圆角,支持百分比
	}
}

FilePicker Events

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

Callback Params

{
	"progress"			: Number, 		// 上传进度 ,仅 @progress 事件包含此字段
	"index"				: Number, 		// 上传文件索引 ,仅 @progress 事件包含此字段
	"tempFile"			: file, 		// 当前文件对象 ,包含文件流,文件大小,文件名称等,仅 @progress 事件包含此字段
	"tempFiles"			: files, 		// 文件列表,包含文件流,文件大小,文件名称等
	"tempFilePaths"		: filePaths, 	// 文件地址列表,@sucess 事件为上传后的线上文件地址
}

FilePicker Methods

通过 $ref 调用

| 方法称名 | 说明 | 参数 |
| :-: | :-: | :-: |
| upload | 手动上传 ,如autoUploadfalse ,必须调用此方法| - |

FilePicker Slots

插槽可定义上传按钮显示样式

插槽名 说明
default 默认插槽

组件用法

基础用法

<uni-file-picker 
	v-model="imageValue" 
	fileMediatype="image" 
	mode="grid" 
	@select="select" 
	@progress="progress" 
	@success="success" 
	@fail="fail" 
/>
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)
			}
		}
}

选择指定后缀图片,且限制选择个数

配置 file-mediatype 属性为 image,限定只选择图片

配置 file-extname 属性为 'png,jpg',限定只选择 pngjpg后缀的图片

配置 limit 属性为 1 ,则最多选择一张图片

配置 mode 属性为 grid ,可以使用九宫格样式选择图片

<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"
/>

手动上传

配置 auto-upload 属性为 false ,可以停止自动上传,通过ref调用upload方法自行选择上传时机

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

单选图片且点击再次选择

配置 disable-preview 属性为 true,禁用点击预览图片功能

配置 del-icon 属性为 false,隐藏删除按钮

配置 return-type 属性为 object,设置 value 类型 ,如需绑定 array类型 ,则设置limit:1,可达到一样的效果

<uni-file-picker 
	disable-preview
	:del-icon="false"
	return-type="object"
>选择头像</uni-file-picker>

自定义样式

配置 image-styles 属性,可以自定义mode:image时的回显样式

配置 list-styles 属性,可以自定义mode:video|| mode:all时的回显样式

<view>
	<uni-file-picker fileMediatype="image" :image-styles="imageStyles"/>
	<uni-file-picker fileMediatype="all" :list-styles="listStyles"/>
</view>
export default {
		data() {
			imageStyles:{
				width:64,
				height:64,
				border:{
					color:"#ff5a5f",
					width:2,
					style:'dashed',
					radius:'2px'
				}
			},
			listStyles:{
				// 是否显示边框
				border: true,
				// 是否显示分隔线
				dividline: true,
				// 线条样式
				borderStyle: {
					width:1,
					color:'blue',
					radius:2
				}
			}
		}
}

使用插槽

使用默认插槽可以自定义选择文件按钮样式

<uni-file-picker 
	v-model="value" file-mediatype="all">
	<button>选择文件</button>
</uni-file-picker>

组件示例

点击查看:https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker