更新记录

1.1.0（2025-10-25） 下载此版本

新增文件上传

1.0.9（2025-09-22） 下载此版本

OffscreenCanvas 兼容性处理

1.0.8（2025-09-21） 下载此版本

水印字体调整

平台兼容性

uni-app(4.76)

ap-upload 图片上传组件

基本用法

<ap-upload v-model="uploadImg" :watermarkData="watermarkData" :httpRequest="httpRequest">
    <template v-slot:preview="{path}"></template>
</ap-upload>

<script>
const watermarkData = {
    name: '张三',
    time: '2025-09-10 10:00',
    address: '江苏省南京市江宁区麒麟街道创研路266号麒麟人工智能产业园6号楼副楼中科院计算技术研究所南京移动通信与计算创新研究院'
}
</script>

属性参数

watermarkData 配置项

使用指定位置水印示例

右下角水印示例

const watermarkData = {
    name: '张三',
    time: '2025-09-10 10:00',
    address: '南京市',
    position: 'bottom-right', // 右下角位置
    margin: 30, // 距离边缘30px
    positionRotate: false, // 不旋转
    opacity: 0.6,
    fontSize: 20,
    color: '#333'
}

左上角水印示例

const watermarkData = {
    name: '机密文件',
    position: 'top-left', // 左上角位置
    margin: 20,
    positionRotate: false,
    opacity: 0.7
}

中心位置水印示例

const watermarkData = {
    name: '仅供内部使用',
    time: '2025-09-10',
    position: 'center', // 中心位置
    positionRotate: true, // 旋转
    angle: -15, // 旋转15度
    opacity: 0.5,
    fontSize: 36,
    color: 'rgba(255, 0, 0, 0.5)'
}

自定义上传函数示例

const httpRequest = ({ file, base64, success, fail }) => {
    // 这里实现自定义上传逻辑
    // 例如调用后端API上传文件

yourUploadAPI(file).then(res => {
        success({ url: res.data.url })
    }).catch(err => {
        fail({ msg: '上传失败' })
    })
}```