Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

图片上传 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>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
maxCountnumber9最大的可上传数量
roundstring|number10图片项目圆角。
urlstring"https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/"上传地址
namestring"file"上传到服务器的名称字段
headerRecord<string, any> | nullnull上传到服务器的头文件
formDataRecord<string, any> | nullnull额外的表单数据。
imgHeightstring"110"图片高,此处不可使用%单位
columnnumber5一行显示几列
okFileIsDeletebooleantrue上传成功的文件是否允许删除
uploadingFileIsDeletebooleantrue上传中的文件是否允许删除
maxFileSizenumber1024102430图片上传的限制大小,默认是30mb(可以开启压缩,最后可能比较小)
statusCodenumber200开发者服务器响应码,默认是200表示上传成功.
modelValueArray<Record<string, any> | string>()=>[]等同v-model
rangUrlstring'url'用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中
beforeDelfunc|booleantrue图片被删除时触发如果返回Promise<false>删除失败否则成功类型null
beforeCompletefunc|booleantrue你需要原路返回参数提供的itemitem可以自行修改响应内容,响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS
autoStartbooleantrue是否自动上传
sourceTypeArray<"album" | "camera">()=>["album","camera"]图片来源同官方的sourceType:'album','camera'
compressbooleantrue是否压缩
compressedHeightstring'auto'压缩后的缩放高,0表示不压缩高
compressedWidthstring'auto'压缩后的缩放高,0表示不压缩宽
qualitynumber80压缩质量
addPosstring"after"添加图片的位置'before'出现在前面'after'出现在后面
modestring"scaleToFill"图片展示的缩放模式同官方.

🌹 事件

事件名参数返回数据描述
complete名称:-,列表数据,-每次全部上传完时触发
change名称:-,列表数据,-变化时触发
delete名称:-,列表数据,-图片被删除时触发
update:modelValue--同步文件列表。

🌽 slot插槽

插槽名数据描述
default-上传按钮插槽

🥗 ref方法

方法名参数返回值描述
startUpload---
choose---