更新记录

1.0.0（2026-01-07） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-uploaderuni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式
• xf-ts辅助样式
• xf-file-grid
• xf-fm-select
• xf-icon

代码演示

基本用法

• 使用组件代码如下：

<template>
    <view>
        <u-form :model="formData" :rules="rules" ref="uFormRef">
            <xf-uploader title="相册上传" :sourceType="['album']" v-model:fileList="formData.imagelist"></xf-uploader>
            <xf-uploader title="拍照上传" :sourceType="['camera']" v-model:fileList="formData.imagelist2"></xf-uploader>

            <xf-uploader title="相册/拍照上传" :required="false" :sourceType="['album', 'camera']"
                v-model:fileList="formData.imagelist3"></xf-uploader>

            <xf-uploader title="视频上传" :sourceType="['video']" :showItemLabel="true"
                v-model:fileList="formData.imagelist4"></xf-uploader>

            <xf-uploader title="文件上传" :sourceType="['file']" :showItemLabel="true"
                v-model:fileList="formData.imagelist5"></xf-uploader>

        </u-form>
    </view>
</template>

<script lang="ts" setup>
    import { computed, ref } from 'vue';
    import { FileStatus, XFFileModel } from '../../../uni_modules/xf-ts/type/type-xf';

    const formData = ref({
        imagelist: [],
        imagelist2: [{ url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/%E8%AE%A2%E5%8D%95%E4%BF%A1%E6%81%AF_1760685017727_a_photo_3.jpeg', name: 'xxx.png' }],
        imagelist3: [],
        imagelist4: [{ url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/订单信息_1760336257603_IMG_0127_compressMedium.mp4', name: 'xxx.mp4', ext: 'mp4' }],
        imagelist5: [{ url: 'https://cf-hz-test-01.xiaofengwang.com/order/orderNum/pic/%E8%AE%A2%E5%8D%95%E4%BF%A1%E6%81%AF_1760341728765_25337000000476126375_%E6%9D%AD%E5%B7%9E%E7%82%B3%E7%82%B3%E5%85%B6%E7%AB%A0%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8.pdf', name: '杭州炳炳其章网络科技有限公司.pdf', ext: 'pdf' }],
    })

</script>

API

Props