更新记录

1.0.4(2025-07-01) 下载此版本

添加localImagePath属性,和imagePath属性分别表示本地图片路径字段和网络图片路径字段

修改网络图片不能预览bug

修改多行图片样式bug

修改删除按钮h5中样式bug

1.0.3(2025-06-26) 下载此版本

处理当列表为空,不需要添加时log报错bug 添加当列表为空且不需要添加时的提示功能

1.0.2(2025-06-26) 下载此版本

添加图片高度属性,默认和宽度一样,用户也可以自定义

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

uni-app x

Chrome Safari Android iOS 鸿蒙 微信小程序
- 5.0 12 -

其他

多语言 暗黑模式 宽屏模式
× ×

sjx-image-upload

该组件为uni_modules组件,下载导入后可以全局直接使用,无需在页面中引入、声明组件

Props

字段 类型 默认值 可选值 功能描述 更新时间
columCount Number 3 数值、建议1~4 每行显示几张图片 2025-06-25
maxCount Number 9 1~9 每次最多可选择图片张数 2025-06-25
sizeType Array ['compressed'] ['compressed',' original'] 图片类型,缩略图、原图,可以选其中一个,也可以全选,注意是数组 2025-06-25
sourceType Array ['camera', 'album'] ['camera', 'album'] 图片来源,拍照、相册,可以选一个,也可以全选,注意是数组 2025-06-25
imageList Array [] ~ 附件列表源数据 2025-06-25
height Number 和宽度一致 数值,例如80 每个附件高度,注意默认是和宽度一致 2025-06-25
imagePath String filePath ~ 网络图片路径字段 2025-06-25
localImagePath String path ~ 本地图片路径字段 2025-07-01
modeType String widthFix ~ 参考官方图片上传接口中modeType参数 2025-06-25
isCompress Boolean false true|false 图片是否需要压缩 2025-06-25
maxSize Number 1024 ~ 单位KB,默认1024KB(1M),使用isCompress属性后酌情设置 2025-06-25
baseUrl String '' ~ 用于加载网络图片,当图片路径缺少前缀时 2025-06-25
isAdd Boolean true true|false 是否显示添加图片按钮 2025-06-25
isDelete Boolean true true|false 是否显示图片删除 2025-06-25

Events

内置点击图片预览,不需要小伙伴自己实现了

事件名 默认值 功能描述 更新时间
addImg ~ 添加图片,回传files 2025-06-25
cancleImg ~ 删除图片,回传删除项item和删除图片角标index 2025-06-25

代码演示

页面代码

复制代码<template>
    <view class="content">
        <view style="padding: 20px;">
            <!-- 说明:
             1、addImg和cancleImg名字无需一致,只要和methods中方法一致即可,例如:@addImg="takePhotos",在methods中定义takePhotos即可
             2、需要压缩时使用is-compress属性,此时maxSize默认是1M(1024KB),你也可以传入最大尺寸,如下图片最大尺寸不超过100KB
             3、baseUrl属性针对列表接口中路径不全时补充,路径完整时请不要使用
             4、其他属性参考文档
             -->
            <sjx-image-upload 
            :imageList='picList'
             imagePath='fjpath' 
             localImagePath="path"
             :columCount='4' 
             :max-count="6" 
             is-compress 
             :max-size="100" 
             base-url="https://qcloud.dpfile.com"
             @addImg="addImg"
             @cancleImg='cancleImg'  />
        </view>
        <view style="padding: 20px;">
            <button type="primary" @click="orderUploadImg">顺序上传(第一张传完传第二张)</button>
            <button type="warn" style="margin-top: 10px;" @click="togetherUploadImg">同时上传(不保证哪一张先上传完)</button>
            <button type="primary" style="margin-top: 10px;" @click="getPicList">获取图片列表</button>
            <button type="warn" style="margin-top: 10px;">删除图片</button>
        </view>
    </view>
</template>

顺序上传

一张一张上传,第一张上传完后才会上传第二张,使用了async和await组合

复制代码addImg(files) {
    this.picList = this.picList.concat(files)
},
async orderUploadImg() {
    //上传照片--给每一个文件添加上传状态
    for (let item of this.picList) {
        //上传状态 0--未上传,1--正在上传;2--上传成功
        item.imgState = item.isCanUp ? 1 : 2
    }
    //上传
    let currentIndex = -1
    for (let item of this.picList) {
        try {
            currentIndex++
            if (item.isCanUp) {
                let result = await this.uploadImage(item)
                if (result.successful) {
                    item.imgState = 2
                    /* 实际开发中为false,这里演示没有实际路径,还是用本地图片 */
                    item.isCanUp = true
                    item.id = result.id
                    item.fjpath = result.fjpath
                    this.picList.splice(currentIndex, 1, item)
                }
            }
        } catch (e) {
            console.log('结果', '失败!');
        }

    }
},
uploadImage(item) {
    return new Promise((resolve, reject) => {
        //模拟上传接口
        setTimeout(() => {
            //已成功
            resolve({
                successful: true,
                id: '111',
                fjpath: '实际路径'
            })
        }, 3000)
    })
}

同时上传

复制代码/* 定义全局变量 */
data() {
    return {
        picList: [],
        needCount: 0,//需要上传的图片个数
        upCount: 0//成功上传的图片个数
    }
},
addImg(files) {
    this.picList = this.picList.concat(files)
},
togetherUploadImg() {
    for (let item of this.picList) {
        //上传状态 0--未上传,1--正在上传;2--上传成功
        item.imgState = item.isCanUp ? 1 : 2
    }
    for (let item of this.picList) {
        if (item.isCanUp) {
            this.needCount++
            this.uploadImageTogether(item)
        }
    }
},
uploadImageTogether(item) {
    //模拟上传接口
    setTimeout(() => {
        /* 实际开发中不需要 item.imgState = 2  item.isCanUp = true */
        item.imgState = 2
        item.isCanUp = true

        this.upCount++
        //上传完毕后,调用列表方法
        if (this.upCount == this.needCount) {
            uni.showToast({
                title: '所有图片上传完毕,请调用获取列表方法',
                icon: 'none'
            })
        }
    }, 3000)
}

获取图片列表

复制代码getPicList() {
    //添加一张网路图片,模拟接口
    uni.showLoading({
        title: '获取列表'
    })
    /* 这里图片的全路径是:https://qcloud.dpfile.com/pc/M3NjfIQao4dqAF_fV9iQBAV695LTSHi3U8_xAr-yI8L0w98P7I9MQvUwyQW3jRL1.jpg;
    有时候返回的路径缺少前面的,注意使用baseUrl属性;如果是全路径无需添加baseUrl属性*/
    setTimeout(() => {
        this.picList.push({
            path: '/pc/M3NjfIQao4dqAF_fV9iQBAV695LTSHi3U8_xAr-yI8L0w98P7I9MQvUwyQW3jRL1.jpg',
            size: 85,
            imgState: 2
        })
        uni.hideLoading()
    }, 2000)
}

删除图片

复制代码cancleImg(item, index) {
    uni.showModal({
        title: '删除',
        content: '确定删除该图片吗',
        showCancel: true,
        success: res => {
            if (res.confirm) {
                //未上传图片,直接删除
                if (item.isCanUp) {
                    this.picList.splice(index, 1)
                } else { //已上传图片,调用接口删除,这里用延时模拟接口调用
                    uni.showLoading({
                        title: '删除中'
                    })
                    setTimeout(() => {
                        uni.hideLoading()
                        this.picList.splice(index, 1)
                    }, 2000)
                }
            }
        }
    })
}

关于我

1、这是我的第一个前端插件,如有不足或不方便的地方,请指出,我尽快完善。

2、各位小伙伴如果需要其他插件的话,请留言,我会根据实际需求及自身能力完成插件或给出建议。

谢谢大家!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

相册、摄像头

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问