Skip to content

YienCheng/vue-file-select

Repository files navigation

vue-file-select

一个很简单的文件选择插件,可满足在vue项目开发中文件选择的需求

安装

    npm install @yien/vue-file-select -S

使用方法

此组件提供三种使用方法,分别为全局注册组件内注册实例挂载注册

全局注册

此方法同一般组件的全局注册方法一样,可以很方便的注册使用此组件。

1、在入口文件main.js中注册FileSelect组件

    // main.js

    // 导入相关组件
    import Vue from "vue";
    import FileSelect from "@yien/vue-file-select";

    /**
     * 注册组件
     * 通过此方法注册,可以自定义全局组件名称
     */ 
    Vue.component("FileSelect", FileSelect);

    // or

    /**
     * 注册组件
     * 通过此方法注册,全局组件名称为: FileSelect
     */ 
    Vue.use(FileSelect);

    // PS:以上两种注册方法选择其中一种即可

2、在.vue单文件中应用此组件

    <!-- xxx.vue -->

    <template>
        <div>
            <!-- 应用组件,绑定change方法 -->
            <FileSelect @change="onChange" />
        </div>
    </template>
    <script>
        export default {
            methods: {
                onChange(files) {
                    // 获取文件列表
                    console.log(files);
                }
            }
        }
    </script>

组件内注册

此方法需要单独在.vue文件中导入组件,注册后使用

    <template>
        <div>
            <!-- 应用组件,绑定change方法 -->
            <FileSelect @change="onChange" />
        </div>
    </template>
    <script>
        // 导入相关组件
        import FileSelect from "@yien/vue-file-select";

        export default {
            // 注册组件
            components: { FileSelect },
            methods: {
                onChange(files) {
                    // 获取文件列表
                    console.log(files);
                }
            }
        }
    </script>

实例挂载注册

通过此方法注册,会在vue实例上挂载一个$fileSelect方法,调用此方法会调起浏览器的文件选择窗口,$fileSelect方法会返回一个promise对象,可通过then方法来接收获取到的文件列表。

1、在入口文件main.js中挂载FileList服务

    // main.js

    // 导入相关组件
    import Vue from "vue";
    import FileSelect from "@yien/vue-file-select";

    /**
     * 注册
     */ 
    Vue.use(FileSelect.service);

2、在.vue单文件中应用

    <template>
        <div>
            <button @click="onClick">选择文件</button>
        </div>
    </template>
    <script>
        export default {
            methods: {
                onClick() {
                    this.$fileSelect()
                        .then(files => {
                            console.log(files);
                        })
                }
            }
        }
    </script>

属性

组件注册方法:props

参数 说明 类型 可选值 默认值
disabled 是否禁用 Boolean true/false false
multiple 是否何以多选 Boolean true/false false
accept 接受上传的文件类型 String - -

实例挂载注册方法:arguments

    this.$fileSelect({
        // 是否禁用
        disabled: false,
        // 是否支持多选
        multiple: false,
        // 文件类型
        accept: '*/*'
    })
        .then(files => {
            console.log(files)
        })

License

MIT

About

Very easy to use file select component for Vuejs!

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published