vue+element 上传文件及文件夹

有需求需要做一个上传压缩包及文件夹的需求，记性不好，记录一下。

HTML 使用的element的upload和form表单，dropdown下拉菜单

<div>
          <el-col :span="24">
            <el-form-item label="材料路径：" prop="fileName">
              <el-col :span="21">
                <el-input v-model="form.fileName" :readonly="true"></el-input>
              </el-col>
              <el-col :span="3" align="center">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <i class="iconfont iconshangchuan upload-icon"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <div @click="emptyData">
                        <el-upload
                          class="project-upload"
                          ref="upload"
                          action=""
                          :multiple="false"
                          :auto-upload="false"
                          :on-change="handleChange"
                          :show-file-list="false"
                          accept=".skp, .3ds, .zip, .rar"
                        >
                          上传文件
                        </el-upload>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div style="cursor: pointer" @click="emptyData">
                        <span class="upload-span">上传文件夹</span>
                        <input
                          title="上传"
                          class="upload-folder-input"
                          multiple=""
                          webkitdirectory=""
                          accept="*/*"
                          type="file"
                          @change="getFiles"
                        />
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-form-item>
          </el-col>
          <div class="uptypestyleclass">请上传后缀名为.zip或者文件夹</div>
        </div>

        <div class="btn-up-group-box">
          <el-button class="active" @click="handleUpload('concessionFormRef')">确定</el-button>
          <el-button @click="cancelUpdateplan">取消</el-button>
        </div>

JS

// 全局定义变量
let currentfile = []

// 清空存放文件的数组及输入框文字
// this.form.fileName = ''  form表单
// this.files data中定义

emptyData() {
      currentfile = []
      this.form.fileName = ''
      this.files = []
    },
// 存放文件的数组
handleChange(file, fileList) {
      currentfile.push(file)
      this.form.fileName = file.name
        this.$set(this.form, 'fileName', file.name)
    },

getFiles(e) {
      // let formData = new FormData()
      this.files = e.target.files || []
      this.form.fileName = this.files.length
        ? this.files[0].webkitRelativePath.split('/')[0]
        : ''
    },


// 点击确定开始上传
// formName是判断使用哪一个表单数据
handleUpload(formName) {
      let vm = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          vm.loading = vm.$loading({
            lock: true,
            text: '正在上传...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)',
          })
          var formData = new FormData()
          if (this.dialogType !== 'add') {
            this.form = {
              id: this.form.solutionPlanId,
              name: this.form.name,
            }
          }
          if (currentfile.length !== 0) {
            currentfile.forEach((res) => {
              formData.append('files', res.raw) // 文件对象  supplyUploadFile
            })
            formData.append('fileType', 1)
          }
          if (this.files.length !== 0) {
            for (let i = 0; i < this.files.length; i++) {
              formData.append('files', this.files[i])
            }
            formData.append('fileType', 2)
          }
          for (const i in this.form) {
            if (i !== 'files' && i !== 'fileName') {
              formData.append(i, this.form[i])
            }
          }
        // 判断是新增还是编辑
          if (this.dialogType === 'add') {
            // 后台新增接口
            addMyPlan(formData)
              .then((res) => {
                vm.loading.close()
                if (res.success) {
                  this.$message.success('新增成功')
                  this.$parent.$parent.getMyPlanTree()
                  this.$parent.$parent.dialogVisible = false
                }
              })
              .catch((err) => {
                vm.loading.close()
              })
          } else {
            // 后台编辑接口
            editMyPlan(formData)
              .then((res) => {
                vm.loading.close()
                if (res.success) {
                  this.$message.success('编辑成功')
                  this.$parent.$parent.getMyPlanTree()
                  this.$parent.$parent.dialogVisible = false
                }
              })
              .catch((err) => {
                vm.loading.close()
              })
          }
        } else {
          return false
        }
      })
    },

// 点击取消时清空  新增 编辑的取消有些不同  看情况修改

cancelUpdateplan() {
      this.currentStep = ''
      this.$parent.$parent.dialogVisible = false
      currentfile.length = 0
    },

CSS

// 部分样式  按照自己需求更改
.project-upload {
    text-align: center;
    .iconfont {
      font-size: 20px;
      color: #f8d71c;
    }
  }

.upload-folder-input {
  width: 100%;
  position: absolute;
  left: 0;
  line-height: 30px;
  opacity: 0;
}

参考文章：http://blog.ncmem.com/wordpress/2023/12/21/vueelement-上传文件及文件夹/