tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
688
2.9m

文件选择 xUploadFile ​

预览

介绍 ​

选择文件使用 x-chooseFile-s 插件。没有提供双向绑定，请根据 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}
小心的是，如果你变动了此值，内部会把默认当前的列表数据清空，直接用此列表替换。这样你在表单加载数据更新编辑时
会很有用。
Array() : UTSJSONObject[] => ([] as UTSJSONObject[])
header头部数据
union() : UTSJSONObject null => { return null }
name文件上传的字段名称
string"file"
formData表单数据
union() : UTSJSONObject null => { return null }
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"]，对应 x-chooseFile-s 的 extension。
Array() : string[] => [] as string[]
borderBottomColor底部线条颜色
string"#f5f5f5"
beforeUpload上传前执行的函数勾子,如果不会使用见demo
类型:(lsit:XUploadFileItem[]) => Promise<XUploadFileItem[]>
这里可以过滤不需要上传的文件.
XFILESUPLOAD_BEFORE_CALLBACK(list : XUploadFileItem[]) : Promise<XUploadFileItem[]> => { return Promise.resolve(list) }

Events 事件 ​

名称参数说明
change-只有删除和上传完成时才会触发
并返回当前的文件列表。

Slots 插槽 ​

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

Ref 方法 ​

名称参数返回值说明
start--上传文件列表
clearCacheFiles--清理已选文件的本地缓存

示例文件路径 ​

json

/pages/biaodan/upload-file

示例源码 ​

uvue
vue
<template>
		<!-- #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">选择文件使用 x-chooseFile-s 插件，安卓、iOS、鸿蒙、Web、微信小程序接口对齐。</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>
</template>

<script setup>
	import { XUploadFileItem } from "@/uni_modules/tmx-ui/components/x-upload-file/interface.uts"
	// @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 : XUploadFileItem[]) => {
		// console.log(list)
		// uni.redirectTo({
		// 	url:"/pages/index/upload-file"
		// })
	}

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

<style>

</style>
最近更新