更新记录

1.0.0（2025-07-08） 下载此版本

图片上传组件，支持单图/多图上传，添加水印上传压缩,适用于 uni-app 项目。

平台兼容性

uni-app(4.06)

uni-app x(4.06)

其他

lsj-image-upload

图片上传组件，支持单图/多图上传，添加水印上传压缩,适用于 uni-app 项目。

特性

• 支持单图/多图上传
• 支持自定义列数和间距
• 支持上传进度显示
• 支持预览和删除
• 支持自定义上传配置
• 支持添加自定义水印

安装

在插件市场中搜索 lsj-image-upload 并导入到项目中。

基础用法

<template>
    <lsj-image-upload v-model="imageList" :upload-config="upload_config" :watermarkConfig="watermark_config" />
</template>
<script setup>
import { ref } from 'vue'
const imageList = ref([])const upload_config = ref({
    url: 'http://xxx.com',
    name: 'file',
    header: {
        'Authorization': uni.getStorageSync('token') ? `Bearer ` + uni.getStorageSync('token') : '',
        'tenant-id': 2,
    },
    enabled: true
})
const image_arr = ref([])
const watermark_config = ref({
    // 是否启用水印
    enabled: true,
    // 水印文本数组（多行水印）
    texts: ['公司名称', '用户信息', '位置信息'],
    // 水印字体大小
    fontSize: 16,
    // 水印颜色
    color: "#fff",
    // 水印位置 (支持: top-left, top-right, bottom-left, bottom-right, center)
    position: "top-left",
    // 水印旋转角度
    rotate: 0,
    // 水印间距
    spacing: 80,
    // 水印边距
    padding: 20,
    // 水印透明度
    opacity: 1,
    format: 'jpg', // 可选值：'jpg', 'png'
    quality: 0.8, // 压缩质量（0-1）
})
</script>

API

Props

uploadConfig

watermarkConfig

Events