vue-simple-uploader组件的使用感受

题记：
（可直接跳过）
我刚实习的时候，就接手了一个任务：重写项目中前端文件上传功能，因为需要支持文件夹上传这个功能点，考虑之后准备用插件，最后选择了vue-simple-uploader。但没想到这个插件从我实习开始陪伴到我实习结束，刚开始时这个插件完成了大部分的需求，但是文件夹上传时，上传速率和预计剩余时间一直不正确，我改了很久也没成功，后来因为其他的开发任务就一直放在角落里吃灰。实习快结束时，恰好产品发布，清一下bug，又捡了回来，重新根据需求优化了这个插件，但是还是没成功，无奈只好隐藏掉上传速率和剩余时间，在实习结束之前，成为了我的一个遗憾。

学习教程：
关于这个插件，可以直接在GitHub上看官方文档和源码，源码很精炼。

官方git链接：https://github.com/simple-uploader/vue-uploader
写的很好的使用教程：
https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html
https://www.helloweba.net/javascript/632.html

粗略的项目实现（上面给了两个写的很好的使用教程，可以去围观围观）：

1. 安装插件

npm install vue-simple-uploader --save

2. main.js中初始化

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

3. 具体vue文件中：template中

        <uploader
          :options="options"
          :file-status-text="statusText"
          :auto-start="false"
          class="uploader-example"
          ref="uploader"
          @file-added="onFileAdded"
          @file-success="onFileSuccess"
          @file-error="onFileError"
          @file-removed="fileRemoved"
        >
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :attrs="attrs" style="background-color: #67C13B"><i class="el-icon-upload" style="margin-right: 5px"></i>上传文件</uploader-btn>
            <uploader-btn :directory="true" style="background-color: #79BBFF"><i class="el-icon-folder-add" style="margin-right: 5px"></i>上传文件夹</uploader-btn>
          </uploader-drop>
          <uploader-list ></uploader-list>
        </uploader>
        <div slot="footer" class="dialog-footer">
          <span class="filetotal">共计: {{this.file_total}}</span>
          <el-button type="danger" plain @click="errorDialog=true" v-show="controllerErrorFileDialog">错误信息</el-button>
          <el-button @click="cancelUpload">取消上传</el-button>
          <el-button type="primary" @click="submitUpload">开始上传</el-button>
        </div>

4. data中数据定义

        options: {
          target: url,
          maxChunkRetries: 2,
          testChunks: false,
          fileParameterName: 'contents',
          chunkSize: 1024 * 1024 * 1024,
          simultaneousUploads: 3,
          query: {
              type: '',
              create_time: ''
            },
          headers: {
            'Authorization': token
          },
        },
        statusText: {
          success: '上传成功',
          error: '上传失败',
          uploading: '上传中',
          paused: '暂停中',
          waiting: '等待中'
        },
        attrs: {
          accept: [],
        },
        file_total: 0, //本次文件上传的总数
        errorfilelist: [], //上传失败信息列表

5. methods中

//添加文件到列表还未上传,每添加一个文件，就会调用一次,在这里过滤并收集文件夹中文件格式不正确信息，同时把所有文件的状态设为暂停中
      onFileAdded(file) {
        let file_type = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension = file_type === this.uploadType;
        if (!extension) {
          let obj = {
            rootname: '无',
            name: file.name,
            errorinfo: "文件不是 " + this.uploadType + " 格式",
          };
          let arr=file.relativePath.split("/");
          if(arr.length>1){
            obj['rootname'] =arr[0]
          }
          this.errorfilelist.push(obj);
          file.ignored = true
        }else{
          file.pause();
        }
        this.$nextTick(() => {
          this.file_total=this.$refs['uploader'].files.length
        });
        if(this.errorfilelist.length !== 0){
          this.controllerErrorFileDialog = true
        }
      },

//每个文件传输给后端之后，返回的信息
      onFileSuccess(rootFile, file, response, chunk) {
        let res=JSON.parse(response)
        if(res.code!==10000){
          let obj = {
            rootname: '无',
            name: file.name,
            errorinfo: res.message,
          };
          if(rootFile.isFolder===true){
            obj['rootname'] = rootFile.name
          }
          this.errorfilelist.push(obj);
          this.controllerErrorFileDialog = true
        }
      },
      // 上传错误触发，文件还未传输到后端
      onFileError(rootFile, file, response, chunk) {
        let obj = {
          rootname: '无',
          name: file.name,
          errorinfo: "文件上传失败",
        };
        if(rootFile.isFolder===true){
          obj['rootname'] = rootFile.name
        }
        this.errorfilelist.push(obj);
        this.controllerErrorFileDialog = true
      },
      // 移除文件
      fileRemoved(file){
        this.$nextTick(() => {
          this.file_total=this.$refs['uploader'].files.length
        });
      },
//点击开始上传按钮
      submitUpload() {
        this.$nextTick(() => {
          for(var i=0;i<this.$refs['uploader'].files.length;i++){
            this.$refs['uploader'].files[i].resume()
          }
        });
      },
      //关闭错误文件提示框口，知道上传对话框被关闭时才会被清空
      closeErrorDialog(){
        this.errorDialog = false;
      },
      // 上传弹框关闭
      handelClose(){
        this.clearcache()
        this.thirdDialog = false
      },
      // 清除缓存
      clearcache() {
        this.file_total = 0;
        this.errorfilelist=[]
        this.controllerErrorFileDialog = false
        this.$refs.uploader.uploader.cancel()
        this.getresourceDetail();
      },
      //取消上传
      cancelUpload() {
        this.thirdDialog = false;
        this.clearcache();
      },

6. css中样式

// 文件上传组件
  .uploader-example {
    width: 90%;
    padding: 15px;
    margin: 0 auto 0;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 8px;
    color: #ffffff;
    border: #ffffff;
  }
  /deep/ .uploader-example .uploader-list {
    max-height: 300px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    .uploader-file[status="uploading"]> .uploader-file-info{
      > .uploader-file-status > span> i{
        visibility:hidden;
      }
      > .uploader-file-status > span> em{
        visibility:hidden;
      }
    }
  }

先这样吧，写的比较粗糙，以后有时间会review进行完善的。