代码:
这是我的后端代码
@ResponseBody
@RequestMapping("/uploadImg")
public Object testUp(MultipartFile pimage,HttpSession session) throws IOException{
//获取上传文件的文件名
String filename = pimage.getOriginalFilename();
//获取删除文件的后缀名
String suffixName = filename.substring(filename.lastIndexOf("."));
//将UUID 作为文件名
String uuid = UUID.randomUUID().toString();
filename = uuid +suffixName;
//通过ServletContext 获取服务器中photo目录的路径
ServletContext servletContext = session.getServletContext();
String photoPath = servletContext.getRealPath("photo");
File file = new File(photoPath);
if (!file.exists()){
file.mkdir();
}
String finalPath = photoPath + File.separator + filename;
pimage.transferTo(new File(finalPath));
System.out.println(finalPath);
//为了在客户端显示图片,要将存储的文件名回传下去,由于是自定义的上传插件,所以此处要手工处理JSON
JSONObject object = new JSONObject();
object.put("imgurl",filename);
//切记切记:JSON对象一定要toString()回到客户端
return object.toString();
}
前端使用 ajaxFileUpload 插件进行上传,想的是通过 ajax 进行文件上传,如何再返回文件的名称,最后进行 url 拼接如何回显这个上传的图片
<script th:inline="javascript">
let url = [[${#servletContext.contextPath}]];
function fileChange() {//注意:此处不能使用jQuery中的change事件,因此仅触发一次,因此使用标签的:onchange属性
alert("change");
$.ajaxFileUpload({
url: url +'/product/uploadImg',//用于文件上传的服务器端请求地址
secureuri: false,//一般设置为false
fileElementId: 'pimage',//文件上传控件的id属性 <input type="file" id="pimage" name="pimage" />
dataType: 'json',//返回值类型 一般设置为json
success: function (obj) //服务器成功响应处理函数
{
alert(obj);
$("#imgDiv").empty(); //清空原有数据
//创建img 标签对象
var imgObj = $("<img>");
//给img标签对象追加属性
imgObj.attr("th:src", "/photo/" + obj.imgurl);
imgObj.attr("width", "100px");
imgObj.attr("height", "100px");
//将图片img标签追加到imgDiv末尾
$("#imgDiv").append(imgObj);
//将图片的名称(从服务端返回的JSON中取得)赋值给文件本框
//$("#imgName").html(data.imgName);
},
error: function (e)//服务器响应失败处理函数
{
alert(e.message);
}
});
}
</script>
html 片段,其余的太多了就截了片段,使用的是 thymeleaf 视图解析器
<form th:action="@{/product/uploadImg}" method="post" enctype="multipart/form-data">
头像: <input type="file" id="pimage" name="pimage" onchange="fileChange()">
<input type="submit" value="上传">
<br><br><br><br>
<div id="imgDiv" style="display:block; width: 40px; height: 50px;"></div>
</form>
问题:
空指针异常 NullPointerException
java.lang.NullPointerException
mvc.controller.ProductInfoController.testUp(ProductInfoController.java:70)
sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
日志:
18:51:06.092 [http-nio-8080-exec-74] DEBUG org.springframework.web.servlet.DispatcherServlet - POST "/mi/product/uploadImg", parameters={}
18:51:06.092 [http-nio-8080-exec-74] DEBUG org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping - Mapped to mvc.controller.ProductInfoController#testUp(MultipartFile, HttpSession)
18:51:06.107 [http-nio-8080-exec-74] DEBUG org.springframework.web.servlet.DispatcherServlet - Failed to complete request: java.lang.NullPointerException
出现在这一行代码
String filename = pimage.getOriginalFilename(); 通过调试得出 pimage 这个对象为 null 所以才报异常,网上找了很久,依赖、配置。。。都没有效果,一直报的是空指针异常。 在springMVCConfig 配置类中也进行了配置 CommonsMultipartResolver
@Bean
public CommonsMultipartResolver getCommonsMultipartResolver(){
return new CommonsMultipartResolver();
}
也没有效果 因为是基于注解方式,找了一整天的问题,终于给我找到了确实是 CommonsMultipartResolver 这个没配对位置
基于注解的 web 配置类
正确的配置位置:
public class Web extends AbstractAnnotationConfigDispatcherServletInitializer {
/**
* Spring 配置类
* @return
*/
@Override
protected Class<?>[] getRootConfigClasses() {
return new Class[]{SpringConfig.class};
}
/**
* SpringMVC 配置类
* @return
*/
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[]{SpringMVCConfig.class};
}
/**
* DispatcherServlet 拦截所有路径
* @return
*/
@Override
protected String[] getServletMappings() {
return new String[]{"/"};
}
/**
* 过滤器
* @return
*/
@Override
protected Filter[] getServletFilters() {
CharacterEncodingFilter characterEncodingFilter = new CharacterEncodingFilter();
characterEncodingFilter.setEncoding("UTF-8");
characterEncodingFilter.setForceResponseEncoding(true);
HiddenHttpMethodFilter hiddenHttpMethodFilter = new HiddenHttpMethodFilter();
return new Filter[]{characterEncodingFilter,hiddenHttpMethodFilter};
}
@Override
protected void customizeRegistration(ServletRegistration.Dynamic registration) {
//文件上传
registration.setMultipartConfig(
new MultipartConfigElement("",1024*1024*500,1024*1024*500,0)
);
}
}
也就是最下面这个 重写customizeRegistration方法,这样子才配置对!!
基于 xml 配置
基于xml的话就直接在SpringMVC.xml中添加 CommonsMultipartResolver 这个 bean 就可以了
<!--必须通过文件解析器的解析才能将文件转换为MultipartFile对象-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>