一、前端如何设置上传组件并将资源上传到后台服务1）首先我们需要新建一个用来提交文件夹的form表单1.添加一个 type=file 的 input 提交组件，添加 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(''); })}
2）然后我们添加自己框架内的一些按钮来触发该隐藏的表单这样做的好处是使用了form文件夹上传的功能，却不用使用他的ui
<!-- 首先创建一个按钮用来触发上传事件 uploadsoundcodebtn() --><el-button v-loading="uploadsoundcodeloading" @click="uploadsoundcodebtn">上传文件夹</el-button>
/*上传事件触发的方法*/uploadsoundcodebtn(){ $("#filefolder").click();},
二、后台如何接收处理文件夹表单数据这里我们使用 list filefolde 类型来接受前端发来的文件集合，filefolde为表单里面的 name
@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怎么实现文件夹上传功能的详细内容。