我的方法是先上传图片到服务器上,返回一个图片的路径,之后再修改数据库头像字段的路径,从而达到头像修改的方法。
首先在pom.xml里导入依赖包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
配置一下resources目录下的spring-mvc.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--上传文件的最大大小 这里为5M-->
<property name="maxUploadSize" value="5242880"></property>
<!--上传文件的编码-->
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
后台的代码
@RequestMapping(value ="uploadHead",method = RequestMethod.POST)
public Object upload(MultipartFile dropzFile, HttpServletRequest request){
Map<String, Object> result = new HashMap<String, Object>();
//获取该文件的名字
String fileName = dropzFile.getOriginalFilename();
//获取服务器的绝对路径
String filePath = request.getSession().getServletContext().getRealPath("/upload");
//切割文件的后缀,获取文件的类型
String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
//创建文件对象,把服务器的路径放进去
File file = new File(filePath);
//判断路径是否存在,不在创建
if (!file.exists()) {
file.mkdirs();
}
//拼接文件名 使用uuid防重名和文件的后缀,
file = new File(filePath, UUID.randomUUID() + fileSuffix);
if(!file.exists()){
try {
//创建文件
file.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
}
try {
//开始搬运文件
dropzFile.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
}
result.put("fileName", file.getName());
//最后返回值,该值为上传后文件的名字
return result;
}
@RequestMapping(value ="upPersonageById",method = RequestMethod.POST)
public Object upPersonageById(@RequestBody UserInfo userInfo){
//前端传id和修改后图片的名字之后修改用户信息头像的路径(图片的名字)
}
前端的代码
要好看的样式需要自己改
<img src="img/" id="headPath" alt="">
<input type="file" style="display:none;" id="file">
<a "files()">替换头像</a>
<a id="file2" "upimg()" style="display:none">确定更换</a>
// js部分 这里我采用的是jQuery及ajax发送请求
//点击上传按钮,触发真正的<input type="file">按钮
function files(){
$("#file").click();
}
// 这里很重要,当选择上传图片后,图片的路径发生改变,需要修改路径,按照这个格式改就没错了
$("#file").change(function(){
$("#headPath").attr("src",URL.createObjectURL($(this)[0].files[0]));
$("#file2").css("display","inline");
});
//开始通过ajax上传图片
function upimg(){
//该函数为储存表单数据的,而这里就头像一个文件,所以只需向该函数里添加一个数据
var dropzFile = new FormData();
//该函数采用Map的键值形式,键的名字需要和后台的接受的该值的名字一样,该值就为文件
dropzFile.append("dropzFile",$('#file')[0].files[0]);
$.ajax({
url:"uploadHead",
type: 'POST',
data: dropzFile,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
$("#headPath").attr("src","upload/"+resp.fileName);
//上传成功后发送另一个请求,修改数据库的的图片路径
upSetImg(resp.fileName);
$("#file2").css("display","none");
},
error:function () {
alert("失败");
}
})
};
//修改数据后台的图片路径
function upSetImg(fileName) {
$.ajax({
url: "upPersonageById",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data:JSON.stringify({
"headPath":fileName,
"userInfoId":userId
}),
success: function (resp) {
alert("图片修改成功");
},
error:function (resp) {
alert("修改失败")
}
})
}