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

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

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> 

springboot的话，你只需要定义一个bean即可

@Configuration
public class MyConfig{
@Bean
public CommonsMultipartResolver multipartResolver(){
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
commonsMultipartResolver.setDefaultEncoding(“utf-8”);
commonsMultipartResolver.setMaxUploadSize(1048576);
return commonsMultipartResolver;
}
}

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目录里面