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中

        
          
          
            上传文件
            上传文件夹
          
          
        
        

          共计: {{this.file_total}}
          错误信息
          取消上传
          开始上传
        

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

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进行完善的。