之前所做的注解配置不动,只需在ServletConfig中注册MultipartConfig便可
import jakarta.servlet.MultipartConfigElement;
import jakarta.servlet.ServletRegistration;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class ServletConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class[]{SpringConfig.class};
}
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[]{SpringMvcConfig.class};
}
@Override
protected String[] getServletMappings() {
return new String[]{"/"};
}
//在此进行注册MultipartConfig↓
//MultipartConfigElement(String location, long maxFileSize, long maxRequestSize, int fileSizeThreshold)
//(存储位置,最大单个文件大小,最大请求大小(在单个请求中有多个文件的情况下),将文件上传进度刷新到存储位置的大小)
@Override
protected void customizeRegistration(ServletRegistration.Dynamic registration) {
registration.setMultipartConfig(
new MultipartConfigElement("",1024*1024*500,1024*1024*500,0)
);
}
}
在js中发送axios请求↓
let formData = new FormData();//需要将文件放入表单数据类中
//使用键值对的方式将数据加入表单数据,取值时通过键名file取出文件
//fileData是通过文件选择器或其他方式得到的文件
// "/files"是controller拦截的路径
formData.append("file", fileData, "上传文件");
axios.post("/files", formData).then(res=>{
console.log(res)//成功后返回的信息
})
通过controller接收上传的文件↓
import domain.Code;
import domain.Result;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
@RestController
@RequestMapping("/files")
public class FileLoadController {
private String prefix = "C:/Users/17512/Desktop/毕设/";
private String infix = null;
private String suffix = null;
private String UPLOAD_COVER_DIRECTORY = "spCoverImage";
private String filePath = null;
private byte[] bytes = null;
private int len = 0;
@PostMapping
public Result saveUploadFile(@RequestParam("file") MultipartFile multipartFile) throws IOException {
//System.out.println(multipartFile.getSize());
FileOutputStream fileOutputStream = null;
BufferedInputStream bufferedInputStream = null;
BufferedOutputStream bufferedOutputStream = null;
// 构造绝对路径来存储上传的文件
infix = UPLOAD_COVER_DIRECTORY;//中缀,要保存文件的文件夹名,这是我项目中需要的
suffix = multipartFile.getOriginalFilename();//后缀,得到formData里的第三个参数即文件名
// 如果目录不存在则创建
File uploadDir = new File(prefix + infix);//前缀+中缀创建保存文件的文件夹
if (!uploadDir.exists()) uploadDir.mkdir();
filePath = uploadDir.getAbsolutePath() + File.separator + suffix;//最终文件名
//System.out.println(filePath);
bufferedInputStream = new BufferedInputStream(multipartFile.getInputStream());
fileOutputStream = new FileOutputStream(filePath);
bufferedOutputStream = new BufferedOutputStream(fileOutputStream);
try {
//System.out.println("开始转存");
bytes = new byte[1024];
len = bufferedInputStream.read(bytes, 0, bytes.length);
while (len != -1) {
bufferedOutputStream.write(bytes, 0, len);
len = bufferedInputStream.read(bytes, 0, bytes.length);
}
} finally {
bufferedOutputStream.close();
fileOutputStream.close();
bufferedInputStream.close();
}
//System.out.println("转存完成");
return new Result(Code.UPLOAD_OK, "上传成功!", filePath);
}
}
用户端显示服务器图片↓
在SpringMvcSupport中注册资源处理器,跟之前学习的给资源放行同理
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class SpringMvcSupprot extends WebMvcConfigurationSupport {
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/img/**").addResourceLocations("/img/");
registry.addResourceHandler("/js/**").addResourceLocations("/js/");
registry.addResourceHandler("/css/**").addResourceLocations("/css/");
//在此注册用户端访问图片路径↓ 注:file:不可少,表示绝对路径
registry.addResourceHandler("/spCoverImage/**").addResourceLocations("file:C:/Users/17512/Desktop/毕设/spCoverImage/");
}
}
html中代码如下↓这里我导入了VUE,不使用vue的项目将src前面的:去掉
<img id="取个名" width="100%" :src="dialogImageUrl" alt="">
js中代码↓
//window.location.href将得到当前http地址,例 http://localhost:8080/
//window.location.href可以不用,img中的src请求路径为spCoverImage/景点测试_12.jpg也会被controller直接拦截后在资源路径中寻找名为景点测试_12.jpg的文件
this.dialogImageUrl = window.location.href + 'spCoverImage/景点测试_12.jpg';
当同一个img,其src不改变,但是文件内容却改变了,想要将img刷新显示,我们可以在给src的路径后加上一个无意义的参数,例↓,这样就能在src不变的情况下,刷新img的显示
document.getElementById("取个名").src = spCoverImage/景点测试_12.jpg+ "?i=" + Math.random();