更新记录
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、各位小伙伴如果需要其他插件的话,请留言,我会根据实际需求及自身能力完成插件或给出建议。
谢谢大家!