spring boot搭建文件服务器解决同时上传多个图片和下载的问题
在平时的业务场景中,避免不了,要搭建文件上传服务器,作为公共服务。一般情况,只做了单个文件的上传,实际业务场景中,却发现单个文件上传,并不能满足一些业务需求,因此我们需要解决如何写一个同时上传多个文件的接口,并返回可下载的文件地址;
废话不多讲,不再从头建立一个Springboot项目,如果不知道的话,请直接前往官网查看实例。
下面我们以上传图片为例,示例相对简单,仅供参考:
1后端上传图片接口逻辑
UploadController.java packagecom.zz.controllers.fileUpload; importcom.zz.Application; importcom.zz.model.Response; importorg.slf4j.Logger; importorg.slf4j.LoggerFactory; importorg.springframework.beans.factory.annotation.Value; importorg.springframework.boot.web.server.LocalServerPort; importorg.springframework.context.annotation.Configuration; importorg.springframework.web.bind.annotation.PostMapping; importorg.springframework.web.bind.annotation.RequestParam; importorg.springframework.web.bind.annotation.RestController; importorg.springframework.web.multipart.MultipartFile; importjava.io.*; importjava.net.Inet4Address; importjava.net.InetAddress; importjava.nio.file.Path; importjava.util.ArrayList; importjava.util.UUID; importstaticcom.zz.config.ConfigConstants.getFileDir; @RestController @Configuration publicclassUploadController{ privatestaticfinalLoggerlog=LoggerFactory.getLogger(Application.class); @Value("${server.port}") privateStringport; //获取当前IP地址 publicStringgetIp(){ InetAddresslocalhost=null; try{ localhost=Inet4Address.getLocalHost(); }catch(Exceptione){ log.error(e.getMessage()); e.printStackTrace(); } returnlocalhost.getHostAddress(); } @PostMapping(value="/upload",consumes={"multipart/form-data"}) publicResponseupload(@RequestParam("file")MultipartFile[]files,Responseresponse){ log.info("上传多个文件"); StringBuilderbuilder=newStringBuilder(); //fileaddress StringfileAddress="http://"+getIp()+":"+port+File.separator; ArrayListimgUrls=newArrayList (); try{ for(inti=0;i 相对于单个文件的接收,我们这里直接接受多个file对象,然后遍历生成每个对应的地址。
其中:
getFileDir设置存放图片的地址,我选择存在项目外的其他地方
com.zz.config.ConfigConstants.getFileDir packagecom.zz.config; publicclassConfigConstants{ publicstaticStringfileDir; publicstaticStringgetFileDir(){ fileDir="/Users/wz/projects/blog/uploadFile/"; returnfileDir; } }当我们把文件生成到指定的文件夹后,我们如何配置在当前server下访问项目外的静态文件图片资源并可以下载呢?
这个我们就要利用springboot配置文件application.yml,当前还有其他方法比如WebMvcConfigurer这里不再赘述。
application.yml pring: jpa: show-sql:true hibernate: ddl-auto:update servlet: multipart: max-file-size:10MB max-request-size:10MB profiles: active:dev #静态资源配置 mvc: static-path-pattern:/** resources: static-locations:file:/Users/wz/projects/blog/uploadFile/,classpath:/static/,classpath:/resources/,classpath:/file/,classpath:/templates/ server: use-forward-headers:true tomcat: remote-ip-header:X-Real-IP protocol-header:X-Forwarded-Proto #自定义 my: tokenURL:"55555" authURL:"88888"这样之后我们在生成的结果中的http://192.168.31.77:8080/a7ef32e3922b46aea256a93dd53de288.png,这样的地址就可以把文件实质性的指向了file:/Users/wz/projects/blog/uploadFile/,这样大致就是一个简单文件服务器的配置了,当然远不及此,还有压缩一类的功能,后续再聊。
后端逻辑已经很清晰;
那前端如何向后端同时发送多个file对象呢?
2前端多个文件上传如何传参
html
js
//upload varuploadBtn=document.querySelector('.el-upload'); uploadBtn.onchange=function(e){ letfiles=this.files; console.log(this.files); constxhr=newXMLHttpRequest(); xhr.open("post","/upload",true); //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange=function(){ if(this.readyState===XMLHttpRequest.DONE&&this.status===200){ console.log(JSON.parse(this.responseText)); const{data}=JSON.parse(this.responseText); if(!data)return; constimageList=data.slice(0); letimageStr=''; imageList.forEach(img=>{ imageStr+=``; }); document.getElementById("result").innerHTML=imageStr; } }; constformData=newFormData(); //多个file同时上传 if(files&&files.length){ for(leti=0;i 前端通过FormData传参数发送POST请求;
区别于之前的单个formData.append();这里我们可以同时append多个相同名字的文件二进制文件流;
![image-20191123234150228](assets/image-
.png)
如图结果正常显示,当我们部署到服务器的时候,这个就可以当作一个web服务器供大家使用。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。