使用vue-simple-uploader实现上传文件夹功能

题记：
（可直接跳过）
最近有个项目中前端文件上传功能，因为需要支持文件夹上传这个功能点，考虑之后准备用插件，最后选择了vue-simple-uploader。

粗略的项目实现：

安装插件

npm install vue-simple-uploader --save

main.js中初始化

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

具体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>

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: [], //上传失败信息列表

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();
      },

css中样式

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

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

知行记

使用vue-simple-uploader实现上传文件夹功能