vue-input-file
v1.0.3
Published
上传文件、本地展示(Vue@2组件)
Downloads
31
Maintainers
Readme
vue-input-file
上传文件、本地展示(Vue@2组件)
- npm:https://www.npmjs.com/package/vue-input-file
- demo:https://realgeoffrey.github.io/vue-input-file/demo/index.html
安装
Node.js安装
npm install vue-input-file --save
浏览器引用
<!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> --> <script src="//unpkg.com/vue-input-file"></script>
注册组件
Node.js注册
全局注册
import Vue from 'vue' import vueInputFile from 'vue-input-file' // 全局注册 Vue.use(vueInputFile, { component: 'InputFile' }) // 组件名默认是:vue-input-file // 或:Vue.component('InputFile', vueInputFile)
局部注册
import vueInputFile from 'vue-input-file' export default { components: { // 局部注册 InputFile: vueInputFile } }
浏览器注册
全局注册
<!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> --> <!-- 需要先引入vue-input-file:<script src="//unpkg.com/vue-input-file"></script> --> <script> // 全局注册 Vue.use(vueInputFile, { component: 'vue-input-file' }) // 组件名默认是:vue-input-file // 或:Vue.component('vue-input-file', vueInputFile) </script>
局部注册
<!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> --> <!-- 需要先引入vue-input-file:<script src="//unpkg.com/vue-input-file"></script> --> <script> new Vue({ components: { // 局部注册 'vue-input-file': vueInputFile } }) </script>
用法
参数
<InputFile accept="input的accept属性('')" :max-size="文件大小上限-M(0,无上限)" allow-blob-url="是否输出Blob URL(true)" allow-base64="是否输出base64(true)" @error="文件大小超过上限回调的方法,带参数{ msg }" @update="input提交文件成功后回调的方法,带参数{ file, blobUrl, base64 }" />
Tips:事件
update
会在提交完成后执行,就算与上一次提交相同文件也会再次执行;用户取消提交、文件大小超过上限终止提交(error
触发)都不会触发update
;v-slot
插槽的内容与事件update
同时更新。插槽
<InputFile v-slot="fileData" > 文件-><br> {{ fileData.file && fileData.file.name }}<br> {{ fileData.blobUrl }}<br> {{ fileData.base64 }} </InputFile>