当前位置:   article > 正文

Vue 常用uploader组件使用,上传组件 vue-simple-uploader的引用

Vue 常用uploader组件使用,上传组件 vue-simple-uploader的引用

推荐博客

特点
支持文件、多文件、文件夹上传
支持拖拽文件、文件夹上传
统一对待文件和文件夹,方便操作管理
可暂停、继续上传
错误处理
支持“快传”,通过文件判断服务端是否已存在从而实现“快传”
上传队列管理,支持最大并发上传
分块上传
支持进度、预估剩余时间、出错自动重试、重传等操作

安装
npm install vue-simple-uploader --save

初始化
import uploader from ‘vue-simple-uploader’
Vue.use(uploader)

<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn>select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      <uploader-btn :directory="true">select folder</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
 </uploader>
</template>

<script>
export default {
  components:{
    
  },
  data(){
    return{
      options: {
        // 可通过 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
        target: '//localhost:3000/upload',
        autoStart: false,
        testChunks: false
      },
      attrs: {
        accept: 'image/*'
      }
    }
  },
  methods:{
    
  }
}
</script>


<style lang="less">
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/66650
推荐阅读