更新记录

1.0.2（2024-11-07） 下载此版本

修改bug

1.01（2024-11-07） 下载此版本

修复上传bug

1.0.0（2024-11-04） 下载此版本

H5上传文件插件，简单的上传，如果用于APP和小程序，仅支持图片，其他文件不支持

平台兼容性

jcy-check

使用示例

<template>
    <view class="bodys">
        <view class="fileList flex-box boxSizing">
            <upload-Files ref="upFiles" :uploadFileUrl="uploadFileUrl" :uFileList.sync="uFileList" :formData="formData"
             @uploadSuccess="uploadSuccess" :count="count" :header="header"></upload-Files>
        </view>
        <button style="position: fixed;bottom: 5%;left: 25%;" type="default" @click="saveData()">上传文件</button>
    </view>
</template>

<script>
    import uploadFiles from '@/components/cn-h5uploadFile/upload-files';
    export default {
        components: {
            uploadFiles
        },
        data() {
            return {
                uFileList: [],//文件列表
                formData:{},
                uploadFileUrl:'',//上传路径
                count:5
                header:{
                    Authorization:'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoyNTk2LCJ1c2VyX2tleSI6Ijc2ZjEyZWI3LWNjYzMtNGQyMy05NWFlLTU0NzkzMTMxMWZkZSIsInVzZXJuYW1lIjpudWxsfQ.gYu90wBHprXM1Pudt4-QdLB5f4W8uE-4N3BSKIYBgz32I9ibbx5OUcxLsTvIWz6QhLdvLcjzzBX-tQkSgVVo5A';
                }
            };
        },
        onLoad(options) {

        },
        onShow() {
            /* 上传路径 */
            this.uploadFileUrl = "";
            /* 额外参数 */
            this.formData = {
                'fileId': '0a3f45303e0b41ddb404b152aff7f0d1',
                'dirClass': '1'
            }

        },
        methods: {
            /* 上传 */
            saveData(){
                //对应组件的上传方法
                this.$refs.upFiles.uploadFiles();
            },

            /*上传成功回调 */
            uploadSuccess(result){
                console.log("上传成功回调",result)
            },
        }
    }
</script>

<style scoped lang="less">
    .bodys{
        padding:0 0 20rpx 0;
        box-sizing: border-box;
    }
    button{
        width: 50%;
        height: 60rpx;
        font-size: 26rpx;
        line-height: 60rpx;
        margin-top: 20rpx;
    }
    .fileList{
        padding: 30rpx;
        margin-top: 40rpx;
    }
</style>

文档说明

1、属性说明

2、事件说明