java实现前端+后端上传图片并回显（ssm）

效果：第一步的图片回显，点击保存才是上传

1、需要两个jar包

保证你ssm环境可以运行的jar包之外还需要加入如下的两个jar包，commons-fileupload-1.3.jar、commons-io-1.2.jar

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</version> </dependency> <!-- https://mvnrepository.com/artifact/commons-io/commons-io --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.2</version> </dependency>

2、在配置文件applicationContext.xml加上以下配置

<!-- 定义文件解释器（文件上传） --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设置默认编码 --> <property name="defaultEncoding" value="utf-8"></property> <!-- 上传图片最大大小1M--> <property name="maxUploadSize" value="1048576"></property> </bean>

3、首先看前端代码：

src里面的内容是我的用户的头像的url

<div> <p>(点击头像开始选择新头像)</p><br> <p > <img class="user-header" style="width: 100px;height: 100px;object-fit: cover;" src="${imgUser.data.userProfilePhoto}"> </p> <br> <form id="test"> <input type="file" name=file onchange="imgChange(event)" id="file" style="display: none"/> </form> <button data-role="none" onclick="testUpload();" class="btn btn-info">保存头像</button> </div>

4、这里的两个js方法可以实现将你要上传的图片先回显

function imgChange(e) { console.info(e.target.files[0]);//图片文件 console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的 var reader = new FileReader(); reader.onload = (function (file) { return function (e) { $('.user-header').attr('src',this.result); }; })(e.target.files[0]); reader.readAsDataURL(e.target.files[0]); } $('.user-header').click(function () { $("#file").click(); });

5、这个js方法实现将图片信息发送到后台：

我因为要更新用户的头像，所以将用户id一起传过去

function testUpload(){ var form = new FormData(); form.append('id',${imgUser.data.userId}); form.append('file',$("#file")[0].files[0]); $.ajax({ url:"/u/img", data:form, type:"POST", processData:false, contentType:false, success : function(result){ if(result.status==200){ alert("成功") }else{ alert(result.msg); } }, }); }

6、后台代码

：

@PostMapping("/u/img") @ResponseBody public E3Result test(MultipartFile file,HttpServletRequest request,long id) throws IOException{ String path = request.getSession().getServletContext().getRealPath("/images"); System.out.println("路径："+path); String fileName = file.getOriginalFilename(); System.out.println("文件名称"+fileName); File dir = new File(path, fileName); System.out.println("判断目录是否存在："+dir.exists()); if(!dir.exists()){ dir.mkdirs(); } // MultipartFile自带的解析方法 file.transferTo(dir); //这里我在拼接出我图片要显示的url String imageurl = "http://localhost:8089/images/"+fileName; //将数据库中信息更新 BUsers bUser = new BUsers(); bUser.setUserId(id); bUser.setUserProfilePhoto(imageurl); E3Result result = getUserInfoService.updateUser(bUser); //返回结果 return result; }

7、测试完成

图片在你的tomcat 的webapps下的images目录里面