contract-front/uni_modules/lime-upload

lime-upload

• 文件上传组件，可以选择图片视频等任意文件，支持指定服务或当前uniCloud，兼容uniapp/uniappx
• 插件依赖lime-style、lime-shared、lime-icon、lime-svg。不喜勿下

安装

插件市场导入即可，首次导入需要重新编译

注意

• 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
• 🔔 不需要lime-svg在lime-icon代码中注释掉即可

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

文档

upload

代码演示

基础使用

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

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

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

const handleAdd = (files: UploadFile[])=>{
	console.log(files)
}

单选

通过设置max为1,multiple为false关闭多选，只允许单选

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

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

文件预览

通过设置default-files或v-model可以绑定已经上传的文件列表，并展示文件列表的预览图

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

import {UploadFile} from '@/uni_modules/lime-upload';
const files = ref<UploadFile[]>([{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/lime-barcode_0.png',
	name: 'uploaded4.png',
	type: 'image',
}])

上传状态

通过设置status属性可以标识上传状态，loading表示上传中,reload表示重新上传,failed表示上传失败,done 表示上传完成。percent属性表示上传进度

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

import {UploadFile} from '@/uni_modules/lime-upload';
const files = ref<UploadFile[]>([{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/lime-tag_0.png',
	name: 'uploaded1.png',
	type: 'image',
	status: 'loading'
},
{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/lime-button_0.png',
	name: 'uploaded2.png',
	type: 'image',
	status: 'loading',
	percent: 68,
},
{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/lime-color_0.png',
	name: 'uploaded3.png',
	type: 'image',
	status: 'reload',
},
{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/lime-barcode_0.png',
	name: 'uploaded4.png',
	type: 'image',
	status: 'failed',
},
{
	url: 'https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/aff13f50-b9d4-11ee-9303-15d888ed69e8_0.png',
	name: 'uploaded5.png',
	type: 'image',
}])

禁用

通过设置disabled可禁用组件

<l-upload :disabled="true">

限制上传数量

通过设置max可设置上传的数量

<l-upload :column="4" :max="10"></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>

上传方式

通过设置action指定服务器地址，如果为uniCloud则上传到当前绑定的uniCloud，设置autoUpload为true选文件后就立即上传。

<!-- 上传到uniCloud -->
<l-upload action="uniCloud" :autoUpload="true">
<!-- 指定服务器 -->
<l-upload action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo" :autoUpload="true">
<!-- 手动上传 -->
<l-upload v-model="files" @add="handleAdd">

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

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

const handleAdd = (files: UploadFile[])=> {
	files.forEach(file =>{
		const task = uni.uploadFile({
		    url: 'https://example.xxx.com/upload', // 仅为示例，非真实的接口地址
		    filePath: file.url,
		    name: 'file',
		    formData: { user: 'test' },
		    success: (res) => {
				file.status = 'done'
				file.url = res.data.url
		        console.log('上传完成')
		    }
		});
		task.onProgressUpdate((res) => {
			file.status = 'loading'
			file.percent = res.progress
		   console.log('上传进度:', res)
		});
	})
}

查看示例

• 导入后直接使用这个标签查看演示效果

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

插件标签

• 默认 l-upload 为 component
• 默认 lime-upload 为 demo

API

Props

参数	说明	类型	默认值
v-model	双向绑定值	number	-
disabled	是否禁用文件上传	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'	string	8px
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	-

UploadFile

名称	类型	默认值	说明
name	String	-	文件名称	N
percent	Number	-	上传进度	N
size	Number	-	文件大小	N
status	String	-	文件上传状态：上传成功，上传失败，上传中，等待上传。TS 类型： 'loading' \| 'reload' \| 'failed' \| 'done'	N
type	String	-	文件类型	N
url	String	-	文件上传成功后的下载/访问地址	N
path	String	-	临时地址	N

主题定制

样式变量

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

名称	默认值	描述
--l-upload-radius	$border-radius	-
--l-upload-width	80px	-
--l-upload-height	80px	-
--l-upload-background	$upload-add-bg-color	-
--l-upload-delete-icon-color	white	-
--l-upload-add-icon-font-size	28px	-
--l-upload-add-bg-color	$gray-1	-
--l-upload-add-color	$text-color-4	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。