springboot+vue使用vue-simple-uploader上传文件夹

Vue-simple-uploader是一个轻量级的vue文件上传组件，可以支持多文件上传以及上传进度和错误信息提示。

要使用vue-simple-uploader实现文件夹上传，需要先将文件夹打包为zip文件，然后使用vue-simple-uploader上传zip文件即可。

以下是实现步骤：

1.安装vue-simple-uploader

npm install vue-simple-uploader --save

2.在Vue组件中引入Vue-simple-uploader

import Uploader from 'vue-simple-uploader'
export default {
  components: {
    Uploader
  }
}

3.在Vue组件中使用Vue-simple-uploader

<template>
  <div>
    <uploader ref="uploader" :upload-url="uploadUrl" :headers="headers" :data="formData" :multiple="false" :extensions="extensions" :auto-upload="false" @file-added="onFileAdded" @file-removed="onFileRemoved" @uploading="onUploading" @upload-success="onUploadSuccess" @upload-error="onUploadError" @upload-complete="onUploadComplete" />
    <button @click="uploadFolder">上传文件夹</button>
  </div>
</template>

4.在Vue组件中实现上传文件夹的方法

methods: {
  uploadFolder() {
    // 将文件夹打包为zip文件
    let zip = new JSZip()
    let folder = zip.folder('folder')
    // 添加文件夹中的文件
    folder.file('file1.txt', 'content1')
    folder.file('file2.txt', 'content2')
    // 生成zip文件
    zip.generateAsync({ type: 'blob' }).then((blob) => {
      // 将zip文件上传
      let file = new File([blob], 'folder.zip')
      this.$refs.uploader.add([file])
      this.$refs.uploader.upload()
    })
  },
  onUploadSuccess(response, file, fileList) {
    // 上传成功回调函数
    console.log(response)
  },
  onUploadError(error, file, fileList) {
    // 上传失败回调函数
    console.log(error)
  }
}

上述代码中，使用JSZip将文件夹打包为zip文件，然后将zip文件添加到vue-simple-uploader中，最后调用upload方法上传文件。上传成功或失败后，会分别调用onUploadSuccess和onUploadError回调函数。

需要注意的是，由于JSZip依赖于浏览器的原生Zip API，因此在一些不支持Zip API的浏览器上可能无法使用。