更新记录

0.0.3（2024-11-04） 下载此版本

• feat: 修复类型问题导致无法运行

0.0.2（2024-10-11） 下载此版本

• chore: 兼容 vue2

0.0.1（2024-10-11） 下载此版本

• init

平台兼容性

lime-upload

• 文件上传组件，可以选择图片视频等任意文件，支持指定服务或当前uniCloud，兼容uniapp/uniappx
• 插件依赖lime-style、lime-shared、lime-icon、lime-svg:这插件为收费(5元)，但若不使用svg可删除SVG插件，不影响使用。不喜勿下
• 插件为初版，可能存在BUG

安装

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

代码演示

基础使用

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

UploadFile

主题定制

样式变量

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

打赏

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