更新记录
1.0.9(2023-11-03)
下载此版本
添加resize方法
1.0.8(2023-10-30)
下载此版本
修改app端返回参数
1.0.7(2023-09-13)
下载此版本
修复微信小程序图片宽度问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
as-upload
图片上传组件
API
Props
属性名 |
说明 |
类型 |
默认值 |
value(v-model) |
图片数据 |
array |
[] |
disabled |
是否禁用, 1.0.2 版本新增 |
boolean |
false |
gutter |
图片间距 |
number |
16 |
column |
每行显示图片个数 |
number |
3 |
imageMode |
图片显示方式:同原生image组件 |
string |
aspectFill |
urlKey |
图片数据中的 url 键名 |
string |
url |
idKey |
图片数据中的 id 键名 |
string |
id |
disablePreivew |
禁用预览 |
boolean |
false |
limit |
最大上传数量限制 |
number |
9 |
showDelete |
是否显示删除按钮, 1.0.2 版本移除 |
boolean |
false |
showSelect |
是否显示新增按钮, 1.0.2 版本移除 |
boolean |
false |
sourceType |
album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 |
array |
["album", "camera"] |
sizeType |
original 原图,compressed 压缩图,默认二者都有 |
array |
["original", "compressed"] |
extension |
根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 |
array |
- |
Events
事件名 |
说明 |
回调参数 |
input |
图片数据发生变化 |
图片列表 |
onDelete |
删除 |
删除的图片元素 |
onChooseImage |
图片上传方法 |
function |
onChooseImage
<template>
<as-upload1
v-model="fileList"
:limit="3"
@onChooseImage="uploadImage"
>
</as-upload1>
</template>
uploadImage(files){
files.forEach(file => {
upload({
url: '/file/upload',
filePath: file.tempFilePath
}).then(res => {
// 上传成功后需要自行push图片
this.formData.fileList.push(res);
})
})
}