Upload 上传

此组件文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

通过 value/v-model 绑定（数组，元素为对象），通常用来回显，其中对象属性：

url 属性为文件路径
name 属性为文件名
extname 属性为文件扩展名
...

html

<template>
    <fu-upload 
        v-model="fileList" 
        @select="handleSelect"
        @delete="handleDelete"
        @progress="handleProgress"
        @success="handleSuccess"
        @fail="handleFail">
    </fu-upload>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let fileList = ref([]);

    // methods方法
    // 获取上传之前文件
    const handleSelect = (e) => {
        console.log(`选择文件：${e}`)
        fileList.value = fileList.value.concat(e.tempFiles);
    };

    // 删除上传的文件
    const handleDelete = (e) => {
        console.log(`删除文件：${e}`)
    };

    // 获取上传进度
    const handleProgress = (e) => {
        console.log(`上传进度：${e}`)
    };

    // 上传成功
    const handleSuccess = (e) => {
        console.log(`上传成功：${e}`)
    };

    // 上传失败
    const handleFail = (e) => {
        console.log(`上传失败：${e}`)
    };
</script>

设置选择图片指定后缀，且限制选择数量

通过 fileType 属性设置为 image 选择图片，只选择图片
通过 fileExtname 属性设置 jpg,png，只选择 jpg 和 png 后缀的图标
通过 maxCount 属性设置 1, 则最多选择一张图片
通过 mode 属性设置为 grid，使用九宫格样式选择图片

html

<fu-upload 
    v-model="fileList" 
    fileType="image"
    fileExtname="jpg,png"
    maxCount="1"
    mode="grid"
    @select="handleSelect"
    @delete="handleDelete"
    @progress="handleProgress"
    @success="handleSuccess"
    @fail="handleFail">
</fu-upload>

设置手动上传

通过 autoUpload 属性设置为 false, 可以关闭自动上传，通过 upload 方法自行手动上传时机

html

<template>
    <fu-upload 
        ref="uploadRef" 
        :autoUpload="false">
    </fu-upload>
    <fu-button @click="handleUpload">上传文件</fu-button>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const uploadRef = ref();

    // methods方法
    const handleUpload = () => {
        uploadRef.value.upload()
    };
</script>

设置单选图片且点击再次选择覆盖

通过 disablePreview 属性设置为 true, 关闭预览功能
通过 delIcon 属性设置为 false，隐藏删除图标
通过 returnType 属性设置为 object，设置 value 类型，如需绑定 array 类型，则设置 maxCount:1，可达到同样效果

html

<fu-upload 
    disablePreview 
    :delIcon="false"
    returnType="object">
    选择头像
</fu-upload>

设置自定义样式

通过 imageStyles 属性，可以自定义 mode:image 时的回显样式
通过 listStyles 属性，可以自定义 mode:video || mode:list 时回显样式
通过 showFileList 属性设置是否回显已上传的文件（默认 true）

html

<template>
    <view>
        <!-- 添加 `image` 自定义上传样式，可以达到身份证、银行卡等不同场景需求 -->
        <!-- 以身份证为例 -->
        <view class="iden-wrap">
            <fu-upload :maxCount="1" :imageStyles="imagesStyle">
                <fu-image width="100%" height="120" :src="$mAssetsPath.idenFront"></fu-image>
            </fu-upload>
            <fu-upload :maxCount="1" :imageStyles="imagesStyle">
                <fu-image width="100%" height="120" :src="$mAssetsPath.idenBack"></fu-image>
            </fu-upload>
        </view>

        <!-- 添加 `video` 自定义上传样式 -->
        <view>
            <video class="video-wrap" :src="video" v-if="video"></video>
            <fu-upload fileType="video" maxCount="1" :show-file-list="false" @select="handleSelectVideo">
                <view class="video-wrap">
                    <view class="add-wrap__content add-wrap">
                        <view class="add-wrap__icon-add"></view>
                        <view class="add-wrap__icon-add add-wrap__rotate"></view>
                    </view>
                </view>
            </fu-upload>
        </view>
    </view>
</template>

<script setup>
    import { reactive, ref } from 'vue';

    // data数据
    let imagesStyle = reactive({
        width: '100%',
        height: '120px',
        border: {
            color: "#F5F5F5",
            width: 1,
            style: 'dashed',
            radius: '5px'
        }
    });
    let video = ref();

    // methods方法
    const handleSelectVideo = (e) => {
        video.value = e.tempFiles[0].url
    };
</script>

<style lang="scss" scoped>
    .iden-wrap {
        display: flex;
        gap: 20rpx;
    }

    .video-wrap {
        width: 33.3%;
        height: 0;
        border: 1px solid #eeeeee;
        border-radius: 3px;
        position: relative;
        box-sizing: border-box;
        padding-top: 33.3%;
        
        .add-wrap {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: center;
            
            &__content {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: 5px;
                overflow: hidden;
            }
            
            &__icon-add {
                width: 45px;
                height: 4px;
                background-color: #efefef;
                border-radius: 2px;
            }
            
            &__rotate {
                position: absolute;
                transform: rotate(90deg);
            }
        }
    }
</style>

value格式说明

三个属性必填，否则可能影响组件显示

json

[
    {
        "name": "file.txt",
        "url": "https://xxxx",
        "extname": "txt",
        // 其他自定义属性...
    }
]

listStyles格式说明

json

{
    "borderStyle": {
        "width": "1px",  // 边框宽度
        "color": "#F5F5F5", // 边框颜色
        "style": "solid", // 边框样式
        "radius": "5px" // 边框圆角，不支持百分比
    },
    "border": false, // 是否显示边框
    "dividline": true, // 是否显示分隔线
}

imageStyles格式说明

json

{
    "width": 120, // 边框宽度
    "height": 120, // 边框高度
    "border": { // 如果为 Boolean 类型，则表示是否显示边框
        "width": 1, // 边框宽度
        "color": "#F5F5F5", // 边框颜色
        "style": "dashed", // 边框样式
        "radius": "5px" // 边框圆角，支持百分比
    }
}

API

Upload Props

属性名	说明	类型	默认值	可选值
value/v-model	绑定数据，通常用来回显已上传的文件，类型由 `returnType` 属性决定	Array｜Object	[]	-
disabled	是否禁用	Boolean	false	true
disablePreview	是否禁用图片预览功能，仅 `mode:grid` 时生效	Boolean	false	true
delIcon	是否显示删除按钮	Boolean	true	false
autoUpload	是否自动上传，值为false则只触发@select，可自行上传	Boolean	false	true
maxCount	最大选择个数，h5会自动忽略多选的部分	String｜Number	9	-
fileType	选择文件类型，all只支持 H5 和微信小程序平台	String	image	video/all
mode	选择文件后的文件列表样式	String	grid	list
fileExtname	选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 `fileType` 属性而不同	Array｜String	-	-
listStyles	`mode:list` 时，文件列表的样式，详见上方listStyles	Object	-	-
imageStyles	`mode:grid` 时，图片的样式，详见上方imageStyles	Object	-	-
readonly	是否只读，设置为 `true` 时，不可选择，不显示进度，不显示删除按钮	Boolean	false	true
returnType	限制返回 `value` 格式，当为 object 时，只能单选且会覆盖，详见上方value格式说明	String	array	object
sizeType	original原图，compressed 压缩图，默认二者都有	Array	['original', 'compressed']	-
sourceType	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项	Array	['album', 'camera']	-
camera	相机类型，仅 `fileType:video` 时生效	String	back	front
compressed	是否压缩所选视频源文件，仅 `fileType:video` 时生效	Boolean	true	false
showFileList	是否显示已上传的文件列表	Boolean	true	false

Upload Methods

方法名	说明	参数
upload	手动上传文件，如果 `autoUpload` 为 `false`，则可以通过该方法触发上传	() => void
clearFiles	清空已上传的文件列表，传入 `Number` 为删除指定下标文件，不传则清空全部文件	(index?: Number) => void

Upload Events

事件名	说明	回调参数
select	选择文件后触发	(e: Object) => void
delete	删除文件后触发	(e: Object) => void
progress	上传时触发	(e: Object) => void
success	上传成功触发	(e: Object) => void
fail	上传失败触发	(e: Object) => void

Upload Slot

名称	说明
default	自定义上传按钮

Upload 上传 ​

平台差异说明 ​

代码示例 ​

基础用法 ​

设置选择图片指定后缀，且限制选择数量 ​

设置手动上传 ​

设置单选图片且点击再次选择覆盖 ​

设置自定义样式 ​

value格式说明 ​

listStyles格式说明 ​

imageStyles格式说明 ​

API ​

Upload Props ​

Upload Methods ​

Upload Events ​

Upload Slot ​

Upload 上传

平台差异说明

代码示例

基础用法

设置选择图片指定后缀，且限制选择数量

设置手动上传

设置单选图片且点击再次选择覆盖

设置自定义样式

value格式说明

listStyles格式说明

imageStyles格式说明

API

Upload Props

Upload Methods

Upload Events

Upload Slot