LimeUpload 文件上传组件

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

• 图片、视频等多种文件类型上传
• 支持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（演示）

注意🔔

本插件依赖的【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-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

参数	说明	类型	默认值
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	添加按钮文本/图标颜色

支持与赞赏

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

支付宝	微信支付

源代码

组件源码