java + vue 实现文件夹上传

前端代码

html

 <label 
     <!--   与input的id绑定点击时就等于点击 input     -->
	 for="uploads"
	 class="tops" >文件夹上传</label>
 <input 
	 type="file" 
	 id="uploads" 
	 name="files" 
	 <!--   上传文件夹要加这个属性     -->
	 webkitdirectory 
	  <!--   选着好文件就会触发     -->
	 @change="files(null)"
	  <!--  执行方法时获取file数据   -->
	 ref="filesInput" 
	  <!-- 隐藏   -->
	 style="display: none;"/>
    

css

.tops {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #DCDFE6;
  border-color: #DCDFE6;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  float: left;
  margin-left: 5px;
  background-color: #1890ff;
  border-color: #1890ff;
  color: #FFFFFF;
  height: 32px;
  line-height: 8px;
  font-size: 12px;

}

js

   //上传文件夹
    files(parentId) {
      let data = this.$refs.filesInput
      let formData = new FormData();
      //必须要遍历添加一遍，文件，要不然后端接收不到数据
      for (let i = 0; i < data.files.length; i++) {
        formData.append('files', data.files[i])
      }
      parentId = parentId == null ? this.upload.parentId : parentId
      let fileName = parentId == null ? this.upload.fileName : ''
      formData.append('fileType', '0')
      formData.append('fileName', fileName)
      formData.append('parentId', parentId)
      addFileUploads(formData).then(row => {
        if (row.code == 200) {
          let list = row.data
          list.forEach(v => {
            this.$notify({ title: '成功', message: '上传成功!' + v, type: 'success' })
            if (parentId != 0) this.fileList.push({ name: v })
          })
          if (parentId == 0) {
            this.resetNode()
          } else {
            //刷新父树状结构
            this.node.parent.loaded = false
            this.node.parent.expand()
          }
        }
      })
    }

ajax

//上传文件夹
export function addFileUploads(data) {
  return request({
    url: '/xxx/xxx/xxx/xxx',
    method: 'post',
    data: data
  })
}

后端

    @PostMapping("/xx/xx")
    public AjaxResult addUploads(@RequestParam("files") MultipartFile[] files, @RequestParam("fileType") String fileType, @RequestParam("fileName") String fileName, @RequestParam("parentId") String parentId) {
       //写自己的逻辑
        ykFileStoreService.addUploads(files,fileType,fileName,parentId);
        return null;
    }

效果图