更新记录
1.0.3(2024-01-11)
下载此版本
- 【修复】只上传一张图片,删除之后,再重新上传异常问题
1.0.2(2023-08-17)
下载此版本
- 新增 自定义返回值
- 规范 上传进度、错误回调参数
1.0.1(2023-08-17)
下载此版本
- 支持 app 上传
- 修复移除文件触发事件
- 修复多处样式
- 解决 h5 和 小程序 上传兼容性问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
km-upload
表单系列,文件上传。包括图片预览、视频预览、办公文件预览
空明组件-表单系列-上传
PS:
- 仅 微信小程序 支持上传文件
- 视频,图片,办公文件可预览(h5 pdf文件不可预览)
- 图片视频等文件必须可以跨域
- 建议先下载示例项目运行查看
- 插件符合 easycom 规范,可以直接在页面中使用
- 有问题可以到 QQ 咨询哈(QQ:2796669349)
props
参数 |
类型 |
默认值 |
是否必须 |
说明 |
action |
String |
|
是 |
该值必须,否则报错 |
maxFile |
Number |
1 |
|
最大上传数 |
disabled |
Boolean |
false |
|
是否禁用上传 |
height |
Number |
50 |
|
表单宽高,该值控制宽度和高度。单位 px |
headers |
Object |
|
|
请求头 |
name |
String |
file |
|
上传文件的 name |
timeout |
Number |
60000 |
|
超时时间。单位毫秒(ms) |
formData |
Object |
|
|
表单其他参数 |
customResult |
String |
|
|
自定义返回值(v1.0.1 新增),以'.'(逗号)表示下层对象。例:'data.url' 表示 响应值: { data: { url: '' } } |
on-timeout |
Function |
|
|
超时回调 |
on-progress |
Function |
|
|
上传进度回调 |
on-error |
Function |
|
|
上传错误回调 |
props 参数解释
-
on-progress 上传进度回调
- 参数
event: {
progress: 10, // 上传进度百分比
loaded: 100, // 已经上传的数据长度,单位 Bytes
total: 1000, // 预期需要上传的数据总长度,单位 Bytes
lengthComputable: true, // 表示服务器在响应中提供了总大小的信息
}
const = (event) => { }
-
on-error 上传错误回调
event
slot
使用
<km-upload
:action="action"
:onTimeout="onTimeout"
@success='success'></km-upload>
上传成功注意事项-重要
// 不设置 customResult 时,上传图片响应值结构必须包含
响应值:{
data: {
url: '图片路径',
},
}
// 设置 customResult 时,例:customResult="data.image.path"
响应值:{ // 设置 customResult 之后,响应值必须按照设置的结构返回,否则报错
data: {
image: {
path: '图片路径'
}
},
}
欢迎各位大佬指正