@yien/vue-file-select v1.1.2
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)
})