FileManager 文件管理

FileManager 是一个用于文件选择和上传的组件，支持自定义文件类型、上传字段、表单数据等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='文件管理器'>
		<t-card class="m.30-tdr-tdb" title="文件管理器-文件选择"
			sub-title="文件管理选择上传组件是一款用于便捷上传、管理和分享文件支持返回文件md5,用于服务端判断重复上传"></t-card>
		<t-section title="基础使用" class="tdr-tdb-mlr.30-mb.10"></t-section>
		<t-file-manager :value="fiellist" class="tdr-tdb-mlrb.30-p.20" @change="fileChange"></t-file-manager>
		<t-section title="插槽自定义布局" class="tdr-tdb-mlr.30-mb.10"></t-section>
		<t-file-manager :value="fiellist1" class="tdr-tdb-mlrb.30-p.20" @change="fileChange">
			<template v-slot:select>
				<t-button class="mtb.20">上传合同</t-button>
			</template>
			<template v-slot:default="{fiels}">
				<t-row class="faic-mtb.20" v-for="(item,index) in (fiels as TuiFilesList[])" :key="index">
					<t-icon type='info' name="integral"></t-icon>
					<t-text type='info'>{{item.name}}</t-text>
				</t-row>
			</template>
		</t-file-manager>
	</t-page>
</template>

<script>
	import { TuiFilesList } from '@/uni_modules/t-ui'
	// import { uploadFileOptions } from '@/util/index'
	export default {
		data() {
			return {
				fiellist: [{
					name: '驾驶证',
					type: '',
					id: '123',
					realFilePath: '',
					cacheFilePath: ''
				}, {
					name: '身份证',
					type: '',
					id: '456',
					realFilePath: '',
					cacheFilePath: ''
				}] as TuiFilesList[],
				fiellist1: [{
					name: '合同一',
					type: '',
					id: '123',
					realFilePath: '',
					cacheFilePath: ''
				}, {
					name: '合同二',
					type: '',
					id: '456',
					realFilePath: '',
					cacheFilePath: ''
				}] as TuiFilesList[]
			};
		},
		methods: {
			fileChange(e : TuiFilesList[]) {
				console.log(e)
				//上传逻辑
				// const choose : ChooseImageSuccess = {
				// 	errSubject: "",
				// 	errMsg: "",
				// 	tempFilePaths: [] as string[],
				// 	tempFiles: [] as any[]
				// }
				// e.forEach((item : TuiFilesList) => {
				// 	choose.tempFilePaths.push(item.realFilePath)
				// 	// #ifdef WEB
				// 	choose.tempFiles.push(item.file)
				// 	// #endif
				// })
				// console.log(choose)
				// uploadFileOptions(choose).then(rst => {
				// 	console.log(rst)
				// })
			}
		}
	}
</script>

<style lang="scss">

</style>

Props

名称	描述	类型	默认值	可选值
type	文件类型	String	'p'	-
value	文件列表	TuiFilesList【】	[]	-
header	头部数据	UTSJSONObject	null	-
name	文件上传的字段名称	String	'file'	-
formData	表单数据	UTSJSONObject	null	-
url	服务器上传地址	String	''	-
maxCount	最大上传数量	Number	-1	-
multiple	是否多选	Boolean	true	false
filter	文件类型过滤器	String	"/"	-

Events

事件名	描述	回调参数	版本
change	文件列表变化时	fileList	-

Methods

方法名	说明	参数
removefile	移除文件	(item: TuiFilesList, index: number)
openfile	打开文件选择器	-

Slots

名称	描述
default	默认插槽，用于显示文件列表
select	选择文件按钮插槽