1. type=file 및 webkitdirectory 로고를 추가하세요. 폴더 업로드 기능을 사용하세요
2. @change="uploadSoundCodeFolder" 이벤트를 추가하세요. 폴더를 업로드하면 uploadSoundCodeFolder() 함수가 트리거되어 업로드 로직을 처리합니다.
<form id="uploadSoundCodeFolderForm" method="post" enctype="multipart/form-data"> <input id="fileFolder" name="fileFolder" type="file" @change="uploadSoundCodeFolder" webkitdirectory> </form>
uploadSoundCodeFolder() 구현 로직은 다음과 같습니다
uploadSoundCodeFolder(e){ this.uploadSoundCodeLoading = true; //获取到选中的文件夹内的所有文件 //files 为一个集合 //可通过遍历 files 的方式获取到每个文件的大小等数据,来实现大小限制等需求 let files = e.target.files; //中间省略大小限制等需求...... //获取表单数据 let formData = new FormData(document.getElementById("uploadSoundCodeFolderForm")); //调用后台服务方法来提交该表单数据 uploadSoundCode(formData).then((res)=>{ _this.$message.success("上传成功") //上传成功后清空表单数据 $("#fileFolder").val(''); }) }
이것의 장점은 UI를 사용하지 않고 양식 폴더 업로드 기능을 사용한다는 것입니다
<!-- 首先创建一个按钮用来触发上传事件 uploadSoundCodeBtn() --> <el-button v-loading="uploadSoundCodeLoading" @click="uploadSoundCodeBtn"> 上传文件夹 </el-button>
/*上传事件触发的方法*/ uploadSoundCodeBtn(){ $("#fileFolder").click(); },
여기서는 List fileFolde 유형을 사용하여 프런트 엔드에서 전송된 파일 컬렉션을 허용합니다. fileFolde는 양식의 이름입니다
@RequestMapping(value="/uploadSoundCode",method= RequestMethod.POST) public AjaxResult uploadSoundCode(List<MultipartFile> fileFolde) throws IOException { String soundCodeUrl = HereUtil.uploadSoundCode(fileFolder); return AjaxResult.success(soundCodeUrl); }
그런 다음 파일을 서버에 저장합니다. 비즈니스
public static String uploadSoundCode(List<MultipartFile> files) throws IOException { for (MultipartFile file : files) { String fileName = file.getOriginalFilename(); if (StrUtil.isBlank(fileName)){ continue; } //上传后的URL全路径 String fullFilePath = "上传的跟路径" + fileName; FileUtil.writeFromStream(file.getInputStream(), fullFilePath); } return ""; }
위 내용은 Java에서 폴더 업로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!