1.代码结构：
2.Controller层
package com.yqifei.upload.controller;import io.swagger.annotations.Api;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;import java.util.ArrayList;import java.util.List;import java.util.UUID;/** * @ClassName UploadController * @Description TODO * @Author jiangyuntao * @Data 2023/3/7 23:52 * @Version 1.0 * @Email yuntaojiang@foxmail.com */@RestController@CrossOrigin@RequestMapping("/posts")@Api(tags = "文件上传控制器")public class UploadController {/*http://localhost:8088/swagger-ui.html#*/ @PostMapping(value="/upload") @CrossOrigin public List fileload(@RequestParam(value = "file") MultipartFile[] file, HttpServletRequest request) throws IOException { System.out.println(file.length); String savaLaction="d:/data/"; String fileSaveName; List imageUri = new ArrayList(); for (MultipartFile multipartFile:file) { System.out.println("文件"+multipartFile.getOriginalFilename()); fileSaveName = UUID.randomUUID().toString()+multipartFile.getOriginalFilename(); multipartFile.transferTo(new File(savaLaction,fileSaveName)); String res = request.getScheme()+"://"+request.getServerName()+":"+"8080"+savaLaction+"/"+fileSaveName; imageUri.add(res); } System.out.println(imageUri); return imageUri; }}
登录后复制
3.跨域拦截器配置
package com.yqifei.upload.utils;import org.springframework.context.annotation.Configuration;import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebFilter(filterName = "CorsFilter")@Configurationpublic class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin","*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); chain.doFilter(req, res); }}
登录后复制
4.application.properties配置
# 应用名称spring.application.name=upload# 应用服务 WEB 访问端口server.port=8088spring.web.resources.static-locations=file:d:/data/spring.servlet.multipart.max-request-size=50MBspring.servlet.multipart.max-file-size=50MB
登录后复制
5.前端页面
nbsp;html>Multiple File Upload Multiple File Upload
登录后复制 图片返回值地址： function uploadFiles() { const files = document.getElementById(“fileInput”).files; const xhr = new XMLHttpRequest(); const formData = new FormData(); for (let i = 0; i < files.length; i++) { formData.append("file", files[i]); } xhr.open("POST", "http://localhost:8088/posts/upload"); xhr.upload.addEventListener("progress", function (event) { if (event.lengthComputable) { const percent = Math.round((event.loaded / event.total) * 100); const progress = document.getElementById("progress"); progress.innerHTML = "Upload progress: " + percent + "%"; } }); xhr.addEventListener("load", function (event) { const response = JSON.parse(event.target.responseText); console.log(response); // 在HTML页面上找到需要显示响应结果的元素 const resultElement = document.getElementById("result"); // 更新元素的文本内容为服务器返回的值 resultElement.textContent = response; }); xhr.send(formData); }
6.效果展示
7.获取图片的url并且读取图片
修改tomcat的server.xml文件
加上下面这句
// docBase代表文件路径，path是浏览器访问时的路径。// 若自己创建的文件夹在tomcat目录的webapps中,不同之处： docBase直接写文件夹文字即可（注意：没有/） 例如 docBase ="home/springbootVue/files"
登录后复制
以上就是SpringBoot如何实现多文件上传的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2603477.html
