vue-simple-uploader上传文件、图片和文件夹_vue标签@file-complete

<uploader
      :options="options"
      class="uploader-example"
      :fileStatusText="fileStatusText"
      :autoStart="autoStart"
      ref="uploader"
      @file-added="fileAdded"
      @file-error="errorUpload"
      @file-success="successUpload"
      @file-complete="fileComplete"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <div style="height: 10rem" class="flex a-c j-c">
          <div style="text-align: center">
            <i
              class="fas fa-upload"
              style="font-size: 2rem; color: #00bbff"
            ></i>
            <div>拖动上传</div>
          </div>
        </div>
        <!-- <uploader-btn>选择文件</uploader-btn> -->
        <div class="flex j-c">
          <uploader-btn :attrs="attrs">上传图片</uploader-btn>
          <uploader-btn :directory="true">上传文件夹</uploader-btn>
        </div>
       
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>

 第一张图片为组件的基本用法

 options: {
           //上传地址
        // target: "http://*******:9000/audit/upload",
        target: "http://localhost:8081/upload",
        testChunks: false,
 
        // // 单文件上传
        // singleFile: true,
 
        // 上传文件会自动分块!!!
        chunkSize: 1024 * 1024 * 1, //每块大小
        simultaneousUploads: 5, //并发上传块数
        
        //请求头
        // headers: {
        //   "Content-Type": "multipart/form-data;charset=UTF-8",
        // },
 
        // 请求接口的参数名
        fileParameterName: "file",
 
        //处理接口的响应
        processResponse: function (response, cb, file, chunk) {
            //调用cb()回调函数,续传文件未上传的片段
 
            //当为最后一个片段时,不再调用该回调函数
          if (chunk.endByte < file.size || chunk.endByte < file.size) {
            cb();
          } else {
 
            this.currentId = JSON.parse(response).id;
            console.log(this.currentId);
          }
        },
        maxChunkRetries: 0,
        processParams: function (params) {
          params.aa = 11;
          // console.log(params);
          return params;
        },
           
        parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, "年")
            .replace(/\days?/, "天")
            .replace(/\shours?/, "小时")
            .replace(/\sminutes?/, "分钟")
            .replace(/\sseconds?/, "秒");
        },
      },

 第二张图片为组件options的配置项

 fileStatusText：可修改上传进度以及结果的文字----这是属性，和options同级哦

 fileStatusText: {
        success: "上传成功",
        error: "上传失败",
        uploading: "上传中...",
        paused: "暂停",
        waiting: "等待中...",
        cmd5: "cmd5",
      }

autoStart：布尔值--决定图片是否自动上传

@file-add        选取图片/文件/文件夹成功,

@file-success        一个片段上传成功

@file-error                一个片段上传失败

@file-complete        整个图片/文件/文件夹上传完成

  fileAdded(file) {
     
      // window.uploader.removeFile(file);
     
    },
 
    successUpload() {
      console.log("success");
    },
 
    errorUpload() {
     
      this.$message({
        type: "warning",
        message: "上传失败",
        duration: 1000,
      });
    },
    
//整个根文件上传结束
    fileComplete(rootFile) {
      console.log("complete");
     
    },

 css可按照个人自行修改

//整个上传窗口样式
.uploader-example {
  width: 44rem;
  padding: 0.75rem;
  margin: 2rem auto;
  font-size: 0.6rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);
}
//上传按钮样式
.uploader-example .uploader-btn {
  margin-right: 0.2rem;
  border: 0;
  color: #fff;
  height: 1.715rem;
  border-radius: 0.15rem;
  padding: auto;
  &:hover {
    opacity: 0.7;
  }
&:nth-child(even) {
    width: 7rem;
    padding-left: 2rem;
    background-color: #cd853f;
    background-image: url(~@/assets/images/文件夹.png);
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position-y: center;
    background-position-x: 0.8rem;
  }
  &:nth-child(odd) {
    width: 7rem;
    padding-left: 2rem;
    background-color: #009fcc;
    background-image: url(~@/assets/images/picture.png);
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position-y: center;
    background-position-x: 0.8rem;
  }
}
//上传列表展示样式
.uploader-example .uploader-list {
  max-height: 22rem;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

此上内容为本人个人理解，应该有很多不足，只是帮助一些刚入门的，写的有错的，各位大佬帮忙指出。

官方文档：https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md