更新记录

0.2.1（2025-09-16） 下载此版本

• feat: uniapp app 使用lime-choose-file插件，用于选择文件

0.2.0（2025-08-31） 下载此版本

• chore: 更新文档

0.1.9（2025-05-26） 下载此版本

• fix: 修复uniapp缺少inject
• feat: 只读时不显示删除和添加按钮

平台兼容性

uni-app(4.75)

uni-app x(4.75)

其他

lime-upload 文件上传组件

一个功能强大的文件上传组件，支持：

• 图片、视频等多种文件类型上传
• 支持uniCloud和自定义服务器上传
• 多文件选择和预览
• 上传状态和进度显示
• 丰富的自定义选项
• 兼容uniapp/uniappx

插件依赖：lime-style、lime-shared、lime-icon、lime-svg

文档链接

📚 组件详细文档请访问以下站点：

• 文件上传组件文档 - 站点1
• 文件上传组件文档 - 站点2
• 文件上传组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-upload
2. 首次导入需要重新编译
3. 在页面中使用l-upload组件（组件）或lime-upload（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可, :::

注意 🔔

uniapp app 如果需要选择所有文件即mediaType="all"时，需要文件选择，它是原生插件，如果购买(收费为29元)则需要自定义基座，才能使用！

代码演示

基础使用

选择文件会触发add事件，获取到对应的file对象。

<l-upload @add="handleAdd"/>

import type { LimeUploadFile} from '@/uni_modules/lime-upload';

const handleAdd = (files: LimeUploadFile[]) => {
    console.log('选择的文件:', files)
}

单选模式

通过设置:max="1"和:multiple="false"实现单选。

<l-upload :max="1" :multiple="false" v-model="files">

import type {LimeUploadFile} from '@/uni_modules/lime-upload';
const files = ref<LimeUploadFile[]>([])

文件预览

通过default-files或v-model绑定已上传文件列表。

<l-upload :column="4" :default-files="files">

import type {LimeUploadFile} from '@/uni_modules/lime-upload';
const files = ref<LimeUploadFile[]>([{
    url: 'https://example.com/uploaded.png',
    name: 'uploaded.png',
    type: 'image',
}])

上传状态

percent属性表示上传进度，通过status属性显示上传状态：

• loading: 上传中
• reload: 重新上传
• failed: 上传失败
• done: 上传完成

<l-upload :column="4" :default-files="files">

const files = ref<LimeUploadFile[]>([
    {
        url: 'https://example.com/uploading.png',
        name: 'uploading.png',
        type: 'image',
        status: 'loading',
        percent: 50
    },
    {
        url: 'https://example.com/failed.png',
        name: 'failed.png',
        type: 'image',
        status: 'failed'
    }
])

禁用状态

通过disabled属性禁用上传功能。

<l-upload :disabled="true">

限制上传数量

通过max属性限制上传文件数量。

<l-upload :max="5"></l-upload>

自定义样式

通过插槽完全自定义上传区域样式。

<l-upload :multiple="false" :column="1" grid-height="200px" add-bg-color="#fff">
    <view style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;">
        <image style="width: 100%; height: 100%; position: absolute; opacity: 0.5;" src="https://tdesign.gtimg.com/mobile/demos/upload1.png"></image>
        <view style="width: 72px; height: 72px; background: #e0eefe; border-radius: 99px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 10;">
            <image style="width: 32px; height: 32px;" src="https://tdesign.gtimg.com/mobile/demos/upload3.png" />
        </view>
    </view>
</l-upload>

上传方式

支持多种上传方式配置：

<!-- 上传到uniCloud -->
<l-upload action="uniCloud" :autoUpload="true">

<!-- 指定服务器 -->
<l-upload action="https://example.com/api/upload" :autoUpload="true">

<!-- 手动上传 -->
<l-upload v-model="files" @add="handleAdd">

import type {LimeUploadFile} from '@/uni_modules/lime-upload';

const files = ref<LimeUploadFile[]>([]);

const handleAdd = (files: LimeUploadFile[]) => {
    files.forEach(file => {
        const task = uni.uploadFile({
            url: 'https://example.com/api/upload',
            filePath: file.url,
            name: 'file',
            formData: { user: 'test' },
            success: (res) => {
                file.status = 'done'
                file.url = res.data.url
                console.log('上传成功')
            }
        });

        task.onProgressUpdate((res) => {
            // 上传进度监控中特别处理了某些平台可能重复触发100%进度的问题
            if(file.status == 'done') return
            file.status = 'loading'
            file.percent = res.progress
            console.log('上传进度:', res.progress)
        });
    })
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-upload/components/lime-upload -->
<lime-upload />

插件标签说明

• l-upload：组件标签
• lime-upload：演示标签

Vue2使用说明

本插件使用了composition-api，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

方法

通过ref调用组件方法：

const uploadRef = ref(null)

// 删除指定索引的文件
uploadRef.value?.remove(0)

LimeUploadFile类型

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果这个组件对您有帮助，可以考虑支持开发者：

支付宝	微信支付