前端代码
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;
}
效果图
