https://github.com/realgeoffrey/vue-input-file

上传文件、本地展示（Vue@2组件）
https://github.com/realgeoffrey/vue-input-file

input-file upload-file vue

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/realgeoffrey/vue-input-file
• Owner: realgeoffrey
• License: mit
• Created: 2019-11-20T02:56:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-29T04:29:20.000Z (over 1 year ago)
• Last Synced: 2024-10-07T04:43:36.167Z (about 1 month ago)
• Topics: input-file, upload-file, vue
• Language: Vue
• Homepage: https://realgeoffrey.github.io/vue-input-file/demo/index.html
• Size: 21.5 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-input-file

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

1. npm：

2. demo：

### 安装

1. Node.js安装

    ```bash

    npm install vue-input-file --save

    ```

2. 浏览器引用

    ```html

    

    

    ```

### 注册组件

1. Node.js注册

    1. 全局注册

        ```javascript

        import Vue from 'vue'

        import vueInputFile from 'vue-input-file'

        // 全局注册

        Vue.use(vueInputFile, { component: 'InputFile' }) // 组件名默认是：vue-input-file

        // 或：Vue.component('InputFile', vueInputFile)

        ```

    2. 局部注册

        ```javascript

        import vueInputFile from 'vue-input-file'

        export default {

          components: {

            // 局部注册

            InputFile: vueInputFile

          }

        }

        ```

2. 浏览器注册

    1. 全局注册

        ```html

        

        

        

        // 全局注册

        Vue.use(vueInputFile, { component: 'vue-input-file' }) // 组件名默认是：vue-input-file

        // 或：Vue.component('vue-input-file', vueInputFile)

        

        ```

    2. 局部注册

        ```html

        

        

        

        new Vue({

          components: {

            // 局部注册

            'vue-input-file': vueInputFile

          }

        })

        

        ```

### 用法

1. 参数

    ```vue

    

    ```

    >Tips：事件`update`会在提交完成后执行，就算与上一次提交相同文件也会再次执行；用户取消提交、文件大小超过上限终止提交（`error`触发）都不会触发`update`；`v-slot`插槽的内容与事件`update`同时更新。

2. 插槽

    ```vue

    

      文件->


      {{ fileData.file && fileData.file.name }}


      {{ fileData.blobUrl }}


      {{ fileData.base64 }}

    

    ```