更新记录

2.4.3（2023-10-30）

更新图片丢失问题

2.4.2（2023-08-14）

优化了功能

2.4.1（2022-11-23）

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

平台兼容性

🎈 个人博客 🎈

说明

    该组件已完成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>

属性

基础属性

config 配置项

v-model 值规范

绑定值对象规范
// v-model绑定值可为对象数组，或者一个路径数组,也可为字符串

// 字符串数组规范
[文件路径, 文件路径]

// 对象数组规范
[{name: 文件名, url: 文件路径}, {name: 文件名, url: 文件路径}]

// 字符串规范
文件路径,文件路径,文件路径,文件路径

回调函数