更新记录
1.0.0(2024-12-05)
下载此版本
- 支持单图/多图上传
- 支持自定义列数和间距
- 支持上传进度显示
- 支持预览和删除功能 支持自定义上传配置
平台兼容性
uni-app
Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
√ |
√ |
√ |
√ |
√ |
× |
- |
- |
- |
微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
√ |
√ |
√ |
√ |
- |
- |
- |
√ |
- |
- |
- |
其他
wht-img-upload
一个简单易用的图片上传组件,支持单图/多图上传,适用于 uni-app 项目。
扫码体验
扫描上方二维码,搜索指定插件,即可体验组件的完整功能!
特性
- 支持单图/多图上传
- 支持自定义列数和间距
- 支持上传进度显示
- 支持预览和删除
- 支持自定义上传配置
安装
在插件市场中搜索 wht-img-upload
并导入到项目中。
基础用法
复制代码<template>
<wht-img-upload v-model="imageList" />
</template>
<script>
export default {
data() {
return {
imageList: []
}
}
}
</script>
API
Props
参数 |
说明 |
类型 |
默认值 |
modelValue/v-model |
图片列表 |
Array |
[] |
max |
最大上传数量 |
Number |
9 |
mode |
上传模式,可选值:single/multi |
String |
'multi' |
columns |
列数 |
Number |
3 |
gap |
间距(rpx) |
Number |
24 |
itemHeight |
图片高度(rpx) |
Number |
216 |
buttonText |
上传按钮文字 |
String |
'上传图片' |
showButtonText |
是否显示按钮文字 |
Boolean |
true |
uploadConfig |
上传配置 |
Object |
- |
Events
事件名 |
说明 |
回调参数 |
update:modelValue |
图片列表更新时触发 |
imageList |
choose |
选择图片后触发 |
imageList |
delete |
删除图片时触发 |
index |
error |
上传错误时触发 |
error |
语法错误: Unexpected token (7:122) 20:40:30.736 at uni_modules\wht-img-upload\components\wht-img-upload\wht-img-upload.vue:7