更新记录

2.4.3(2023-10-30) 下载此版本

更新图片丢失问题

2.4.2(2023-08-14) 下载此版本

优化了功能

2.4.1(2022-11-23) 下载此版本

修改小程序引用图片渲染层报错问题

查看更多

平台兼容性

Vue2 Vue3
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 点击已上传(取消自动上传时是已选择的文件列表)的文件列表某个项时触发

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问