组件库文档 tmui.design
图片上传 Upload
Upload 是一个常用的图片上传组件
🌶️ 图片上传 Upload 示例
查看模拟效果+
示例模板
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="更多属性见文档:上传前勾子,上传前添加头部参数,是否允许删除非常多的人性化配置等等"
></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"
@complate="complateFile"
>
</tm-upload>
<tm-divider></tm-divider>
<tm-text
:font-size="24"
_class="text-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 complateFile = (file:file)=>{
console.log(file)
}
const onStart = (item: any) => {
console.log(item)
return true
}
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | Number | 400 | 组件宽度 |
rows | Number | 5 | 每行显示几张图片 |
imageHeight | Number | 140 | 图片高度 |
defaultValue | Array<file> | [] | 默认的图片文件列表 |
imageModel | String | scaleToFill | 图片缩放模式 |
modelValue | Array<file> | [] | 文件列表,常用于双向绑定 |
color | String | primary | 组件颜色 |
header | Object | 图片上传http头 | |
formData | Object | 图片上传formData | |
formNamev3.0.83+ | String | 'file' | 文件表单名称(后台读取文件时的表单字段名) |
maxFile | Number | 9 | 最大可选图片数量 |
maxSize | Number | 1010241024 | 图片最大上传大小 |
url | String | "" | 上传地址 |
disabled | Boolean | false | 是否禁用组件 |
autoUpload | Boolean | true | 是否自动上传 |
onRemove | Function / Boolean | true | 删除前执行,如果返回false,将阻止删除 |
onStart | Function / Boolean | true | 上传前执行,如果返回false,将阻止上传 |
onSuccessAfter | Function / Boolean | true | 上传成功后,从服务器响应后立即执行,此时,还未更改当前文件上传的状态,是成功还是失败,如果此时返回false,将会让文件状态从成功改为上传失败,尽管 从服务器正确返回,但仍然显示失败 |
beforeChooese | Function / Boolean | true | 选择文件前执行,如果此时返回false,将阻止选择文件。你可以在这里做一些上传前的配置 |
chooesefileAfter | Function / Boolean | true | 选择文件后执行,函数中参数:file[],最后return file[]后,上传时以你修改后的文件列表为准 |
fileType | Array<string> | ['album','camera'] | 选择图片的场景,默认是从相册中和相机中 |
status-code | Number | 200 | 服务器请求成功时的状态值 |
show-status | Boolean | true | 是否显示底部的状态栏 |
** chooesefileAfter **
ts
const chooesefileAfter = (files:file[])=>{
//files为你选择图片后的的文件列表,已经处理过了,里面有一个url待上传的路径。
//如果你通过uni.compressImage压缩后,修改url路径,最后上传以你提供的路径 准
return files
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
success | / | item:当前上传成功文件的对象,fileList:累积上传成功文件的对象列表 | 成功后返回两个值,item与fileList 分别表示当前上传成功的文件对象以及累积上传成功的文件对象列表 |
fail | / | / | item:当前上传失败的文件对象,fileList:累积上传文件的对象列表 |
complete | / | item:当前上传文件的对象,fileList:累积上传文件的对象列表 | 成功后返回两个值,item与fileList 分别表示当前上传成功的文件对象以及累积上传成功的文件对象列表 |
remove | / | item:当前删除文件的对象 | 返回一个值 item 为删除文件的对象 |
change | / | item:当前改变文件的对象 | 返回一个值 item 为改变文件的对象 |
注意:complete事件是无论上传成功与失败都会返回,success与fail事件对等,之后是complete事件
🌽 slot插槽
iconv3.0.77+:用来自定义显示,上传提示的图标,可以自定义图标或者text名称。
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
start | / | / | 开始上传 |
stop | / | / | 停止上传 |
clear | / | / | 清除所有文件 |
del | fileId: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()