Skip to content

realgeoffrey/vue-input-file

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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="文件大小上限-M0,无上限)"
      allow-blob-url="是否输出Blob URL(true)"
      allow-base64="是否输出base64(true)"
      @error="文件大小超过上限回调的方法,带参数{ msg }"
      @update="input提交文件成功后回调的方法,带参数{ file, blobUrl, base64 }"
    />

    Tips:事件update会在提交完成后执行,就算与上一次提交相同文件也会再次执行;用户取消提交、文件大小超过上限终止提交(error触发)都不会触发updatev-slot插槽的内容与事件update同时更新。

  2. 插槽

    <InputFile
      v-slot="fileData"
    >
      文件-><br>
      {{ fileData.file && fileData.file.name }}<br>
      {{ fileData.blobUrl }}<br>
      {{ fileData.base64 }}
    </InputFile>