目录

• 2. 关于vue-simple-uploader

  vue-simple-uploader是基于 simple-uploader.js 封装的vue上传插件。它的优点包括且不限于以下几种：

  • 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
  • 可暂停、继续上传
  • 错误处理
  • 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
  • 分块上传
  • 支持进度、预估剩余时间、出错自动重试、重传等操作

  读这篇文章之前，建议先读一遍simple-uploader.js的文档，然后再读一下vue-simple-uploader的文档，了解一下各个参数的作用是什么，我在这里假定大家已经比较熟悉了。。
  vue-simple-uploader文档

  simple-uploader.js文档

  安装：npm install vue-simple-uploader --save
  使用：在main.js中：

  import uploader from 'vue-simple-uploader' Vue.use(uploader)

  3. 基于vue-simple-uploader封装全局上传组件

  引入vue-simple-uploader后，我们开始封装全局的上传组件globalUploader.vue，代码比较长，就不整个放出来了，源码放到github上了，这里一步一步地讲解。

  template部分如下，本人自定义了模板和样式，所以html部分比较长，css部分暂时不列出，大家可以根据自己的ui去更改，主要关注一下uploader这个组件的options参数及文件added、success、progress、error几个事件：

  <template>     <div id="global-uploader">          <!-- 上传 -->         <uploader                 ref="uploader"                 :options="options"                 :autoStart="false"                 @file-added="onFileAdded"                 @file-success="onFileSuccess"                 @file-progress="onFileProgress"                 @file-error="onFileError"                 class="uploader-app">             <uploader-unsupport></uploader-unsupport>              <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadBtn">选择文件</uploader-btn>              <uploader-list 
                          
  关键字：