vue-input-file

上传文件、本地展示（Vue@2组件）

1. npm：https://www.npmjs.com/package/vue-input-file
2. demo：https://realgeoffrey.github.io/vue-input-file/demo/index.html

安装

1. Node.js安装

    npm install vue-input-file --save
   

2. 浏览器引用

    <!-- 需要先引入vue：<script src="//unpkg.com/vue@2"></script> -->
    <script src="//unpkg.com/vue-input-file"></script>
   

注册组件

1. Node.js注册

   1. 全局注册

       import Vue from 'vue'
       import vueInputFile from 'vue-input-file'
      
       // 全局注册
       Vue.use(vueInputFile, { component: 'InputFile' }) // 组件名默认是：vue-input-file
       // 或：Vue.component('InputFile', vueInputFile)
      

   2. 局部注册

       import vueInputFile from 'vue-input-file'
      
       export default {
         components: {
           // 局部注册
           InputFile: vueInputFile
         }
       }
      

2. 浏览器注册

   1. 全局注册

       <!-- 需要先引入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>
      

   2. 局部注册

       <!-- 需要先引入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>
      

用法

1. 参数

    <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同时更新。

2. 插槽

    <InputFile
      v-slot="fileData"
    >
      文件-><br>
      <br>
      <br>
         
    </InputFile>
   

This site is open source. Improve this page.