Skip to content
On this page

组件库文档 tmui.design

图片上传 Upload

Upload 是一个常用的图片上传组件


🌶️ 图片上传 Upload 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="font-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-text :font-size="24" _class="font-weight-b" label="更多属性见文档:上传前勾子,上传前添加头部参数,是否允许删除非常多的人性化配置等等"></tm-text>
			<tm-divider></tm-divider>
			<tm-upload  showSort :onStart="onStart" v-model="list" ref="up" :width="636"  :rows="4"  url="https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload">
			</tm-upload>
			<tm-divider></tm-divider>
			<tm-text :font-size="24" _class="font-weight-b" label="通过插槽修改上传图标,以下是测试上传后。如果服务返回 的不是json对象数据就让其失败。"></tm-text>
			<tm-divider></tm-divider>
			<tm-upload :imageHeight="200" :rows="2" v-model="list" showSort :default-value="list" ref="up" :onSuccessAfter="test" :width="636"   url="https://mockapi.eolink.com/tNYKNA7ac71aa90bcbe83c5815871a5b419601e96a5524d/upload">
				<template v-slot:icon>
					<tm-text label="上传"></tm-text>
				</template>
			</tm-upload>
			
		</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 tmUpload from "@/tmui/components/tm-upload/tm-upload.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmButton from "@/tmui/components/tm-button/tm-button.vue"
import { file } from "@/tmui/components/tm-upload/upload";
const dateStr = ref('')
const showdate = ref(false)
const up = ref<InstanceType<typeof tmUpload> | null>(null)
const list = ref([])
/**
 * 以下是测试上传后。如果服务返回 的不是json对象数据就让其失败。
 */
const test = (item:file)=>{
	let d = item.response;
	let isOk = true
	try{
		let p = JSON.parse(d)
		if(p?.code!=0){
			isOk = false;
		}
	}catch(e){
		isOk = false;
	}

	return isOk;
}
const onStart = (item:any)=>{
	console.log(item)
	return true;
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

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

参数名类型默认值描述
widthNumber400组件宽度
rowsNumber5每行显示几张图片
imageHeightNumber140图片高度
defaultValueArray<file>[]默认的图片文件列表
imageModelStringscaleToFill图片缩放模式
modelValueArray<file>[]文件列表,常用于双向绑定
colorStringprimary组件颜色
headerObject图片上传http头
formDataObject图片上传formData
formNamev3.0.83+String'file'文件表单名称(后台读取文件时的表单字段名)
maxFileNumber9最大可选图片数量
maxSizeNumber1010241024图片最大上传大小
urlString""上传地址
disabledBooleanfalse是否禁用组件
autoUploadBooleantrue是否自动上传
onRemoveFunction / Booleantrue删除前执行,如果返回false,将阻止删除
onStartFunction / Booleantrue上传前执行,如果返回false,将阻止上传
onSuccessAfterFunction / Booleantrue上传成功后,从服务器响应后立即执行,此时,还未更改当前文件上传的状态,是成功还是失败,如果此时返回false,将会让文件状态从成功改为上传失败,尽管 从服务器正确返回,但仍然显示失败
beforeChooeseFunction / Booleantrue选择文件前执行,如果此时返回false,将阻止选择文件。你可以在这里做一些上传前的配置
fileTypeArray<string>['album','camera']选择图片的场景,默认是从相册中和相机中
status-codeNumber200服务器请求成功时的状态值

🌹 事件

事件名参数返回数据描述
success/item:当前上传成功文件的对象,fileList:累积上传成功文件的对象列表成功后返回两个值,item与fileList 分别表示当前上传成功的文件对象以及累积上传成功的文件对象列表
fail//item:当前上传失败的文件对象,fileList:累积上传文件的对象列表
complate/item:当前上传文件的对象,fileList:累积上传文件的对象列表成功后返回两个值,item与fileList 分别表示当前上传成功的文件对象以及累积上传成功的文件对象列表
remove/item:当前删除文件的对象返回一个值 item 为删除文件的对象
change/item:当前改变文件的对象返回一个值 item 为改变文件的对象

注意:complete事件是无论上传成功与失败都会返回,success与fail事件对等,之后是complete事件

🌽 slot插槽

iconv3.0.77+:用来自定义显示,上传提示的图标,可以自定义图标或者text名称。

🥗 ref方法

方法名参数返回值描述
start//开始上传
stop//停止上传
clear//清除所有文件
delfileId:Number/String/删除文件列表内某一项文件
getFailList//获取上传失败的文件文件列表
clearFail//清空上传失败文件列表,只要标识不是成功的都会删除
ts
import {getCurrentInstance} from "vue"
import tmUpload from "@/tmui/components/tm-upload/tm-upload.vue"
const {proxy} = getCurrentInstance();
// 开始上传
proxy.$refs.upload.start()
// 停止上传
proxy.$refs.upload.stop()
// 清除所有文件
proxy.$refs.upload.clear()
// 删除文件列表内某一项文件
proxy.$refs.upload.del("fileId")
// 获取上传失败的文件文件列表
const getFailList =  proxy.$refs.upload.getFailList()
// 清空上传失败文件列表
proxy.$refs.upload.clearFail()

😡 贡献者

Wicos