更新记录
2.4.3(2023-10-30)
下载此版本
更新图片丢失问题
2.4.2(2023-08-14)
下载此版本
优化了功能
2.4.1(2022-11-23)
下载此版本
修改小程序引用图片渲染层报错问题
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue app-nvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
说明
该组件已完成H5以及个小程序适配
由于app权限限制问题,该组件无法在高版本安卓系统下运行
全新上传选择文件组件正在完善当中,该组件可在app环境下正常运行
示例
<template>
<div style="margin-top: 200px;">
<ln-change-file
:disabled=""
:action="getUploadURL()"
v-model="data"
:config="config"
@change-list="handleFile">
</ln-change-file>
</div>
</template>
<script>
import LnChangeFile from '../../components/ln-change-file/ln-change-file.vue'
export default {
components: {
LnChangeFile
},
data() {
return {
data: '',
config: {
title: "最大上传文件个数",
size: 200,
limit: 9,
headers: this.getHeaders(),
formData: {},
automatic: true,
fileMediatype: "all",
},
}
},
onLoad() {
},
methods: {
getUploadURL(){
return '上传路径';
},
getHeaders() {
return {}; // 上传header中数据
},
}
}
</script>
属性
基础属性
属性 |
类型 |
默认值 |
说明 |
action |
String |
|
上传文件的接口路径 |
disabled |
Boolean |
false |
是否禁用上传 |
config |
Object |
{} |
组件配置字段(配置字段如下) |
showFileList |
Boolean |
true |
是否显示上传文件的列表展示 |
v-mode |
Array|String |
'' |
上传文件的集合也可是用’,‘(逗号)隔开的字符串 |
config 配置项
属性 |
类型 |
默认值 |
说明 |
title |
String |
'' |
提示标题 |
size |
Number |
2 |
文件限制大小 M, 安卓该字段失效 |
headers |
Object |
{} |
请求上传接口时的请求头 |
formData |
Object |
{} |
请求上传接口时的附带参数 |
automatic |
Boolean |
false |
是否取消组件上传,取消后,可通过绑定的 fileList 值获取选择文件的 list |
fileMediatype |
String |
all |
上传文件的类型,all、image、video、file 选择 all 时会出现上传文件选项弹出框 |
v-model 值规范
绑定值对象规范
// v-model绑定值可为对象数组,或者一个路径数组,也可为字符串
// 字符串数组规范
[文件路径, 文件路径]
// 对象数组规范
[{name: 文件名, url: 文件路径}, {name: 文件名, url: 文件路径}]
// 字符串规范
文件路径,文件路径,文件路径,文件路径
回调函数
回调 |
返回值类型 |
说明 |
change-list |
String |
点击已上传(取消自动上传时是已选择的文件列表)的文件列表某个项时触发 |
change-list |
String |
点击已上传(取消自动上传时是已选择的文件列表)的文件列表某个项时触发 |