TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
891
3.6m

文件选择 xUploadFile ​

在线预览
在线模拟尺寸:

介绍 ​

使用时请注意区别：安卓端和IOS端没有区别。web端是我模拟的格式有点区别，上传文件是File对象。 没有提供双向绑定，因为可能的数据格式化比较麻烦，请根据change事件来保存数据,微信端请保证你的小程序隐私政策中勾选了相关权限使用.

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-upload-file/x-upload-file.uvue

使用 ​

ts

<x-upload-file></x-upload-file>

Props 属性 ​

名称说明类型默认值
defaultList提供的默认上传的文件列表
请确保要有以下三个字段：
1.name
2.type
3.request 你服务器自己构造的成功数据，例：{code,data,msg}
小心的是，如果你变动了此值，内部会把默认当前的列表数据清空，直接用此列表替换。这样你在表单加载数据更新编辑时
会很有用。
UTSJSONObject[] | nullnull
header头部数据
UTSJSONObject | nullnull
name文件上传的字段名称
string"file"
formData表单数据
UTSJSONObject | nullnull
url服务器上传地址
string"https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/"
maxCount最大上传数量
-1表示不限制
number-1
multiple是否多选
booleantrue
maxFileSize最大文件大小,单位字节
超过此大小的文件不会被上传。30*1024*1024
number30*1024*1024
loading当前是否在上传中
请使用v-model:loading来
不可更改此值。
booleantrue
autoStart选择文件后自动上传
booleantrue
statusCode服务正常返回的状态码如果为此值表示失败。
number200
disabled禁用上传功能
booleanfalse
uploadFileDisabledDel已上传的文件是否禁用删除
这个是某些特殊的erp系统中的需求需要。
booleanfalse
filter文件过滤器,不要动态修改。
空数组时为所有文件类型,类型请注意使用如下规范:
如:["jpg","docx","doc","webp"]
在ios需要14+支持类型过滤，14以下此属性无效,
web是过滤指定类型.
在安卓端事实上系统差异,暂时无法多文件类型过滤,安卓只会取类型文件中的最后一项,如上述只会取webp
但在安卓是我映射的类型,因为如果比如我要jpg,gif格式,只取gif肯定不行,因此你写jpg,gif,png其实在
安卓端都是同一种类型文件对应image*所有图图片类型,比如你写pdf,zip,josn格式,都是统一为application*
因此在安卓它是对应一种文件类的类型不是指代具体的后缀.
string[]():string[] => [] as string[]
borderBottomColor底部线条颜色
string"#f5f5f5"
beforeUpload上传前执行的函数勾子,如果不会使用见demo
类型:(lsit:fileListType[]) => Promise<fileListType[]>
这里可以过滤不需要上传的文件.
XFILESUPLOAD_BEFORE_CALLBACK(list : fileListType[]) : Promise<fileListType[]> => { return Promise.resolve(list) }

Events 事件 ​

名称参数说明
change-变动触发change

Slots 插槽 ​

名称说明数据
default触发文件选择的区域插槽-
list--

Ref 方法 ​

名称参数返回值说明
clearCacheFiles--安卓专用清缓存函数
start--上传文件列表

示例文件路径 ​

json

/pages/biaodan/upload-file

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">文件选择 xUploadFile</x-text>
			<x-text color="#999999">使用时请注意区别：安卓端,IOS端,微信小程序没有区别。web端是我模拟的格式有点区别，上传文件是File对象。</x-text>
			<x-text color="#999999">微信小程序使用前:请确保授权相关文件选择权限.</x-text>
		</x-sheet>



		<x-sheet>
			<x-upload-file :before-upload="bef" :auto-start="true" ref='filse' @change="onchange"
				:default-list="list"></x-upload-file>
			<x-button @click="upl" :block="true" class="mt-20" skin="thin">手动上传</x-button>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import { fileListType } from "@/uni_modules/x-file-s"
	// @ts-ignore
	const filse = ref<XUploadFileComponentPublicInstance | null>(null)
	const list = [
		{ name: "测试文档.doc", type: "doc", id: "1", request: "{code:1,data:'11',msg:'成功'}" } as UTSJSONObject,
		{ name: "测试服务默认文件22.mp4", type: "mp4", id: "2", request: "{code:1,data:'22',msg:'成功'}" } as UTSJSONObject,
	] as UTSJSONObject[]

	const onchange = (list : fileListType[]) => {
		// console.log(list)
		// uni.redirectTo({
		// 	url:"/pages/index/upload-file"
		// })
	}

	const upl = () => {
		filse.value?.start?.()
	}
	const bef = (list : fileListType[]) : Promise<fileListType[]> => {
		console.log(list)
		// 处理或者过滤好list再返回来就可以过滤掉待要或者已经上传的文件.
		return Promise.resolve(list)
	}
</script>

<style>

</style>
最近更新