vue-upload-component | 一款基于vuejs的强大的文件上传组件


源码介绍

简要教程

vue upload component是一款基于vuejs的强大的文件上传组件。它支持常规的文件上传,以及多文件上传,文件目录上传,支持缩略图预览,支持拖拽上传等,功能十分强大。

vue upload component文件上传组件支持vue2.x和vue3.x。它的特点有:

  • 支持多文件上传
  • 支持上传目录
  • 支持拖拽上传
  • 支持拖拽目录上传
  • 支持同时上传多个文件
  • 使用多线程
  • 支持html4(IE 9)
  • 使用PUT方法
  • 支持自定义过滤器
  • 支持缩略图
  • 支持分块上传

使用方法

安装

如果您想使用vue upload component文件上传组件,首先您需要安装它,命令如下:

// vue2.x
npm install vue-upload-component --save

// vue3.x
npm install vue-upload-component@next --save
    
使用

一个简单的示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue-upload-component Test</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-upload-component"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="file in files">{{file.name}} - Error: {{file.error}}, Success: {{file.success}}</li>
  </ul>
  <file-upload
    ref="upload"
    v-model="files"
    post-action="/post.method"
    put-action="/put.method"
    @input-file="inputFile"
    @input-filter="inputFilter"
  >
  Upload file
  </file-upload>
  <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
  <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
</div>
<script>
new Vue({
  el: '#app',
  data: function () {
    return {
      files: []
    }
  },
  components: {
    FileUpload: VueUploadComponent
  },
  methods: {
    /**
     * Has changed
     * @param  Object|undefined   newFile   Read only
     * @param  Object|undefined   oldFile   Read only
     * @return undefined
     */
    inputFile: function (newFile, oldFile) {
      if (newFile && oldFile && !newFile.active && oldFile.active) {
        // Get response data
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  Get the response status code
          console.log('status', newFile.xhr.status)
        }
      }
    },
    /**
     * Pretreatment
     * @param  Object|undefined   newFile   Read and write
     * @param  Object|undefined   oldFile   Read only
     * @param  Function           prevent   Prevent changing
     * @return undefined
     */
    inputFilter: function (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        // Filter non-image file
        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
          return prevent()
        }
      }

      // Create a blob field
      newFile.blob = ''
      let URL = window.URL || window.webkitURL
      if (URL && URL.createObjectURL) {
        newFile.blob = URL.createObjectURL(newFile.file)
      }
    }
  }
});
</script>
</body>
</html>
    

详细的使用方法和配置参数请参考:vue upload component官网

github网址:https://github.com/lian-yue/vue-upload-component



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部