TMUI 3.1.1
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

文件上传 UploadFile ​

Upload 是一个常用的图片上传组件，注意这是useUploadFile函数的界面化组件，如果你对界面不满意可自行布局上传界面。 所有上传功能都已实现。你仅需要展示下界面即可。具体见useHook函数集

🌶️ 文件上传 UploadFile 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-text :font-size="24" _class="text-weight-b" label="更多属性见文档：注意这里不支持nvue,不支持app平台,且也仅支持微信,qq,h5,web,部分支持飞书,字节平台.这里的兼容性是跟随uniapp sdk的兼容来的"></tm-text>
			<tm-text :font-size="24" >这个组件是新增的useUploadFile vue3组合式hooks函数的一个界面化组件.核心是这个函数.因此如果界面不符合你的预期,你可以自行布局界面调用函数方法实现.方法中已经包含了所有功能,因此你只要关心你的界面就行.功能我已经兼容并实现了.主要整合了wx.chooseImage,wx.chooseVideo,wx.chooseMedia方法.因此兼容有限.</tm-text>
			<tm-divider></tm-divider>
			<tm-text class="my-24" :font-size="28" _class="text-weight-b" :label="uploading?'当前上传状态:上传中':'当前上传状态:已结束上传'"></tm-text>
			<tm-upload-file :config="{hostUrl:'https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload'}" v-model:uploading="uploading" v-model="list" :defaultValue="list"></tm-upload-file>
		</tm-sheet>

	</tm-app>
</template>
<script lang="ts" setup>
	import { ref, computed, getCurrentInstance, nextTick } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import tmApp from '@/tmui/components/tm-app/tm-app.vue'
	import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
	import tmText from '@/tmui/components/tm-text/tm-text.vue'
	import tmUploadFile from '@/tmui/components/tm-upload-file/tm-upload-file.vue'
	import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
	import tmButton from '@/tmui/components/tm-button/tm-button.vue'
	
	const list = ref(["https://cdn.tmui.design/gds2023628-2024628.jpg"]);
	const uploading = ref(false);
	
</script>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
❌❌file模式仅支持微信,QQ,H5,WEB,如果配置为media模式则全部支持✔️✔️

🌱 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
colorstringprimary主题、颜色值
defaultValue```stringFILE_TYPEFILE_TYPE[]
modelValue```stringFILE_TYPEFILE_TYPE[]
disabledbooleanfalse是否禁用上传
disabledRemovebooleanfalse是否禁用删除功能
uploadingbooleanfalse可v-model:uploading绑定以查看当前是否处于上传中还是结束上传了。
configUSE_UPLOAD_FILE_CONFIG_TYPE{}上传的配置，结构下方

** 数据结构

ts
//文件对象结构
export interface FILE_TYPE {
    url: string,//当前显示的图片地址，这是个本地临时地址。待上传前，成功后会替换服务器地址。
    status?: string,//上传状态文本
    progress?: number,//当前文件上传的进度
    uid?: string | number,//文件唯一标识id
    statusCode?: STATUS_CODE,//文件状态
    response?: any,//上传成功后的回调数据。
    name?: string,//文件名称
    size?: number,//文件大小字节单位
    FILE?: any,//文件对象。
    [key: string]: any
}

//文件上传的状态值
export enum STATUS_CODE {
    //待上传
    upload = 0,
    //上传中
    uploading = 1,
    //上传失败
    fail = 2,
    //上传成功
    success = 3,
    //超过大小限制
    max = 4,
}
export interface USE_UPLOAD_FILE_CONFIG_TYPE {
    /**media表示只允许图片或者视频选择，file表示允许任意文件，但只支持h5,微信平台  */
    uploadType:"media"|"file",
    maxCount: number,//一次选择文件最大数量。
    extension: string[],//文件选择的类型。
    type: "all" | "image" | "video" | "file" | undefined,
    /**只对h5 */
    sourceType: Array<'album' | 'camera'>,
    maxSize: number,//每一个文件上传的最大尺寸，默认为10mb
    hostUrl: string,//上传文件的服务器地址
    autoUpload: boolean,
    header: { [key: string]: any },//头部参数。
    formData: { [key: string]: any },//额外的表单数据。
    formName: string,
    code: number,//服务器响应码，如果不为此码，表示上传失败。
    maxDuration:number,//如果选择的类型是视频，可以定制此拍摄的最大时长。仅uploadType为media时有效
    sizeType:Array<'original'|'compressed'>,//仅对 mediaType 为 image 时有效，是否压缩所选文件,仅uploadType为media时有效
    camera:'back'|'front',//仅在 sourceType 为 camera 时生效，使用前置或后置摄像头,仅uploadType为media时有效
    mediaType:Array<'image'|'video'>,//注意当uploadType=media时，如果是微信，抖音，飞书这里可以为当前正常类型值；如果是其它平台：只取数组中第一个值，比如要选择图片设置为["image"],视频：["video"],仅uploadType为media时有效

}

🌹 事件 ​

事件名参数返回数据描述
click/item:FILE_TYPE当前文件的对象点击项目时触发

🌽 slot插槽 ​

暂无

🥗 ref方法 ​

方法名参数返回值描述

😡 贡献者 ​