更新记录

0.1.2（2025-05-23）

更新日志

[0.1.2]（2025-05-23）

新增

• 初始版本发布
• 支持多图片上传
• 支持预览、删除、重试
• 支持自定义上传
• 支持弹窗模式
• 支持自定义样式
• 支持进度显示
• 支持最大数量限制
• 支持自动上传
• 支持禁用状态
• 支持自定义按钮
• 支持自定义操作栏
• 支持自定义图片项
• 支持自定义上传方法
• 支持自定义请求头
• 支持自定义表单数据
• 支持自定义边框颜色
• 支持自定义背景颜色
• 支持自定义选中边框颜色
• 支持自定义选中背景颜色
• 支持自定义图片间距
• 支持自定义图片项高度
• 支持自定义每行显示数量
• 支持弹窗模式下的关闭按钮

优化

• 优化图片项布局，确保完全占满容器宽度
• 优化添加按钮样式，与图片项保持一致
• 优化弹窗模式下的关闭按钮样式
• 优化间距计算方式
• 优化样式结构，提高代码可维护性

修复

• 修复图片项宽度计算问题
• 修复添加按钮占满整行的问题
• 修复弹窗模式下布局问题
• 修复间距计算不准确的问题

[0.1.0-beta]（2025-05-23）

新增

• 首次发布（测试版）
• 支持多图上传
• 支持上传进度显示
• 支持图片预览
• 支持删除和重试
• 支持自定义上传
• 支持弹窗模式
• 支持自定义样式

功能特性

• 图片列表双向绑定
• 混合来源选择（拍照/相册）
• 动态网格布局配置
• 上传状态机管理（等待/上传中/成功/失败）
• 进度可视化反馈
• 自动/手动上传模式
• 弹窗/嵌入形态切换
• 样式可覆盖（边框/背景/间距）
• 失败重试机制
• 预览控制开关

技术实现

• 使用 uni-app 原生 API
• 无需第三方依赖
• 支持多平台
• 完整的事件系统
• 丰富的插槽支持
• 高度可定制化

待优化

• 图片压缩功能
• 拖拽排序功能
• 分片上传支持
• CDN直传鉴权
• EXIF方向自动修正
• 网络中断容错
• 上传优先级排序

平台兼容性

image-uploader

图片上传组件，支持多平台：H5、App、微信小程序等。使用uni-app原生API实现，无需第三方依赖。

功能特点

• 支持多图片上传
• 支持预览、删除、重试
• 支持自定义上传
• 支持弹窗模式
• 支持自定义样式
• 支持进度显示
• 支持最大数量限制
• 支持自动上传
• 支持禁用状态
• 支持自定义按钮
• 支持自定义操作栏
• 支持自定义图片项
• 支持自定义上传方法
• 支持自定义请求头
• 支持自定义表单数据
• 支持自定义边框颜色
• 支持自定义背景颜色
• 支持自定义选中边框颜色
• 支持自定义选中背景颜色
• 支持自定义图片间距
• 支持自定义图片项高度
• 支持自定义每行显示数量
• 支持弹窗模式下的关闭按钮

使用方式

<template>
    <image-uploader
        v-model="imageList"
        :max-count="9"
        :row-count="3"
        :auto-upload="true"
        :upload-url="uploadUrl"
        :form-data="formData"
        :headers="headers"
        :is-popup="false"
        :border-color="#eee"
        :bg-color="#fff"
        :selected-border="#007AFF"
        :selected-bg="#f0f9ff"
        :gap="8"
        :item-height="200rpx"
        :disabled="false"
        :preview="true"
        @select-success="handleSelectSuccess"
        @select-overlimit="handleSelectOverlimit"
        @upload-start="handleUploadStart"
        @upload-progress="handleUploadProgress"
        @upload-success="handleUploadSuccess"
        @upload-fail="handleUploadFail"
        @upload-complete="handleUploadComplete"
        @delete="handleDelete"
        @retry="handleRetry"
        @popup-open="handlePopupOpen"
        @popup-close="handlePopupClose"
    >
        <!-- 自定义添加按钮 -->
        <template #add-button>
            <text class="custom-add-icon">+</text>
        </template>

        <!-- 自定义图片项 -->
        <template #image-item="{ item, index }">
            <view class="custom-image-item">
                <image :src="item.url" mode="aspectFit" />
            </view>
        </template>

        <!-- 自定义操作栏 -->
        <template #action-bar>
            <view class="custom-action-bar">
                <button @tap="handleCustomAction">自定义操作</button>
            </view>
        </template>
    </image-uploader>
</template>

<script>
export default {
    data() {
        return {
            imageList: [],
            uploadUrl: 'https://example.com/upload',
            formData: {
                token: 'xxx'
            },
            headers: {
                'Authorization': 'Bearer xxx'
            }
        }
    },
    methods: {
        handleSelectSuccess(files) {
            console.log('选择成功', files)
        },
        handleSelectOverlimit() {
            console.log('超出限制')
        },
        handleUploadStart(file) {
            console.log('开始上传', file)
        },
        handleUploadProgress(file) {
            console.log('上传进度', file)
        },
        handleUploadSuccess(file) {
            console.log('上传成功', file)
        },
        handleUploadFail(file) {
            console.log('上传失败', file)
        },
        handleUploadComplete() {
            console.log('上传完成')
        },
        handleDelete(file) {
            console.log('删除', file)
        },
        handleRetry(file) {
            console.log('重试', file)
        },
        handlePopupOpen() {
            console.log('弹窗打开')
        },
        handlePopupClose() {
            console.log('弹窗关闭')
        },
        handleCustomAction() {
            console.log('自定义操作')
        }
    }
}
</script>

属性说明

事件说明

插槽说明

注意事项

1. 上传地址必须配置
2. 弹窗模式下会自动添加关闭按钮
3. 图片项高度可以通过 itemHeight 属性自定义
4. 每行显示数量可以通过 rowCount 属性自定义
5. 图片间距可以通过 gap 属性自定义
6. 支持自定义上传方法
7. 支持自定义请求头
8. 支持自定义表单数据
9. 支持自定义样式
10. 支持自定义按钮
11. 支持自定义操作栏
12. 支持自定义图片项
13. 支持自定义上传方法
14. 支持自定义请求头
15. 支持自定义表单数据
16. 支持自定义边框颜色
17. 支持自定义背景颜色
18. 支持自定义选中边框颜色
19. 支持自定义选中背景颜色
20. 支持自定义图片间距
21. 支持自定义图片项高度
22. 支持自定义每行显示数量
23. 支持弹窗模式下的关闭按钮