更新记录

0.2.0(2025-08-31) 下载此版本

  • chore: 更新文档

0.1.9(2025-05-26) 下载此版本

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

0.1.8(2025-05-26) 下载此版本

  • feat: 增加getTempFileURL
查看更多

平台兼容性

uni-app(4.75)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- 5.0
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

uni-app x(4.75)

Chrome Safari Android iOS 鸿蒙 微信小程序
5.0

其他

多语言 暗黑模式 宽屏模式
× ×

lime-upload 文件上传组件

一个功能强大的文件上传组件,支持:

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

插件依赖:lime-stylelime-sharedlime-iconlime-svg

文档链接

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

安装方法

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

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

代码演示

基础使用

选择文件会触发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-filesv-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

参数 说明 类型 默认值
v-model 双向绑定值 UploadFile[] -
disabled 是否禁用文件上传 boolean false
readonly 只读 boolean false
multiple 支持多文件上传 boolean true
disabled 禁用全部操作 boolean false
disablePreview 是否禁用预览 boolean false
autoUpload 是否自动上传 boolean false
defaultFiles 默认列表 UploadFile[] -
imageFit 预览图裁剪模式,可选值参考小程序image组件的mode属性 string -
gutter 格子间隔 string 8px
column 列数 string 8px
mediaType 支持上传的文件类型,图片或视频 'image'\|'video'\|'media' string image
maxDuration 拍摄视频最长拍摄时间,单位秒 number 10
sizeType original 原图,compressed 压缩图 string[] ['original','compressed']
sourceType album 从相册选图,camera 使用相机,默认二者都有 string[] ['album', 'camera']
max 用于控制文件上传数量,值为 0 则不限制 number 100
sizeLimit 图片文件大小限制,默认单位 KB。 number -
uploadIcon 上传图标name number 1
uploadIconSize 上传图标尺寸 string -
gridWidth 格子宽度 string 80px
gridHeight 格子高度 string 80px
gridBgColor 格子背景色 string -
gridBorderRadius 格子圆角 string -
addBgColor 上传格子背景色 string -
loadingText 上传文本 string -
reloadText 重新上传文本 string -
failedText 错误文本 string -
action 上传地址 如需使用uniCloud服务,设置为uniCloud即可 string -
headers 请求中其他额外的 form data object -

Events

事件名 说明 回调参数
add 选择文件后触发 files: LimeUploadFile[]
remove 删除文件时触发 { index: number, file: LimeUploadFile }
success 全部文件上传成功时触发 results: UploadResult[]
fail 任意文件上传失败时触发 error: Error
click 点击文件区域时触发 { file: LimeUploadFile }

方法

通过ref调用组件方法:

const uploadRef = ref(null)

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

LimeUploadFile类型

属性 类型 说明
name string 文件名称
url string 文件地址
type string 文件类型
status 'loading'|'reload'|'failed'|'done' 上传状态
percent number 上传进度(0-100)
path string 临时地址
size number 文件大小

主题定制

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

名称 默认值 描述
--l-upload-radius $border-radius 上传组件边框圆角半径
--l-upload-width 80px 上传组件宽度
--l-upload-height 80px 上传组件高度
--l-upload-bg-color $upload-add-bg-color 上传组件背景颜色
--l-upload-delete-icon-color white 删除按钮图标颜色
--l-upload-delete-bg-color $bg-color-mask 删除按钮图标背景色
--l-upload-add-icon-font-size 28px 添加按钮图标大小
--l-upload-add-bg-color $gray-1 添加按钮背景颜色
--l-upload-add-color $text-color-4 添加按钮文本/图标颜色

支持与赞赏

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

支付宝 微信支付

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议