表单组件
图片上传 TmUploadPhoto
样式丰富塑造性好
🌶️ 示例
查看模拟效果+
示例模板
vue
<template>
<view>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b mt-16">图片上传 TmUploadPhoto</tm-text>
<view class="mb-16">
<tm-text>样式丰富塑造性好。</tm-text>
</view>
</tm-sheet>
<tm-sheet>
<tm-upload-photo v-model="modelvalue"></tm-upload-photo>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b">自定样式,列,上传位置</tm-text>
</tm-sheet>
<tm-sheet>
<tm-upload-photo v-model="modelvalue2" add-pos="before" :column="3" img-height="200">
<tm-sheet round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" border-color="primary" border-width="1" margin="0" padding="0">
<tm-icon size="64" color="primary" name="inbox-unarchive-fill"></tm-icon>
</tm-sheet>
</tm-upload-photo>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b">限定一个</tm-text>
</tm-sheet>
<tm-sheet>
<tm-upload-photo :column="1" img-height="200" :max-count="1">
<tm-sheet round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" color="#e7f2ff" border-style="dashed" border-color="primary" border-width="1" margin="0" padding="0">
<tm-icon size="74" color="primary" name="sticky-note-add-line"></tm-icon>
</tm-sheet>
</tm-upload-photo>
</tm-sheet>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const modelvalue = ref<Array<Record<string, any> | string>>(['https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/0306ed00-b46d-11ee-800c-6f5e9833f51b_0.jpg?&v=1716952063'])
const modelvalue2 = ref<Array<Record<string, any> | string>>(['https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/0306ed00-b46d-11ee-800c-6f5e9833f51b_0.jpg?&v=1716952063'])
</script>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
maxCount | number | 9 | 最大的可上传数量 |
round | string|number | 10 | 图片项目圆角。 |
url | string | "https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/" | 上传地址 |
name | string | "file" | 上传到服务器的名称字段 |
header | Record<string, any> | null | null | 上传到服务器的头文件 |
formData | Record<string, any> | null | null | 额外的表单数据。 |
imgHeight | string | "110" | 图片高,此处不可使用%单位 |
column | number | 5 | 一行显示几列 |
okFileIsDelete | boolean | true | 上传成功的文件是否允许删除 |
uploadingFileIsDelete | boolean | true | 上传中的文件是否允许删除 |
maxFileSize | number | 1024102430 | 图片上传的限制大小,默认是30mb(可以开启压缩,最后可能比较小) |
statusCode | number | 200 | 开发者服务器响应码,默认是200表示上传成功. |
modelValue | Array<Record<string, any> | string> | ()=>[] | 等同v-model |
rangUrl | string | 'url' | 用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中 |
beforeDel | func|boolean | true | 图片被删除时触发如果返回Promise<false>删除失败否则成功类型null |
beforeComplete | func|boolean | true | 你需要原路返回参数提供的itemitem可以自行修改响应内容,响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS |
autoStart | boolean | true | 是否自动上传 |
sourceType | Array<"album" | "camera"> | ()=>["album","camera"] | 图片来源同官方的sourceType:'album','camera' |
compress | boolean | true | 是否压缩 |
compressedHeight | string | 'auto' | 压缩后的缩放高,0表示不压缩高 |
compressedWidth | string | 'auto' | 压缩后的缩放高,0表示不压缩宽 |
quality | number | 80 | 压缩质量 |
addPos | string | "after" | 添加图片的位置'before'出现在前面'after'出现在后面 |
mode | string | "scaleToFill" | 图片展示的缩放模式同官方. |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
complete | 名称:-,列表数据, | - | 每次全部上传完时触发 |
change | 名称:-,列表数据, | - | 变化时触发 |
delete | 名称:-,列表数据, | - | 图片被删除时触发 |
update:modelValue | - | - | 同步文件列表。 |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
default | - | 上传按钮插槽 |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
startUpload | - | - | - |
choose | - | - | - |