1.フロントエンドは、アバター画像リソースをバックエンドへのAjaxリクエストの形式でformdataに送信します。
1.午後のバグを書いた著者の場合、ここで遭遇したすべてのバグを共有して、誰もが私のように穴を踏まないようにします。最初に全員にページ効果を見せ、画像をクリックして選択し、[アップロード]をクリックします。画像をアップロードし、
HTML部分をCSSスタイルで自分でデバッグします。
<label class="control-label file">
<div>
<img id="userUrl" style="border-radius: 100px;" src="${user.userUrl}">
</div>
<input type="file" id="photo">
<input type="hidden" id="userId" value="${user.userId}">
</label>
<p style="margin-left: 20px;">点击头像选择图片，再点击上传</p>
<input id="changeBtn" class="btn btn-info" value="上传">
jsの部分：
formdataの使用にはいくつかの落とし穴があります。
- contentType：falseは、jQueryがcontentTypeを処理しないようにするためです。contentTypeをmultipart / form-dataに追加しないでください。ブラウザーが追加するため、メタに追加しないでください。それ以外の場合は、境界が表示されます。。。、国境が見つからない問題。
- processData：falseは、画像をアップロードしているため、jQueryがデータを文字列に処理しないようにします
$("#changeBtn").click(function () {
var formData = new FormData();
formData.append("photo",$('input#photo')[0].files[0]);
formData.append("userId",$("#userId").val());//业务需求，需要把图片和用户关联起来
$.ajax({
url: "自己上传文件的url",
type: 'POST',
contentType: false,
processData: false,
data: formData,
success: function (data) {
$.alert({
title: data.code,
content: data.msg,
});
$("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src
},
error: function (data) {
$.alert({
title: 'Error',
content: '修改头像失败，请稍后重试！',
});
}
});
});
3.バックエンドコントローラセクション
1.コントローラー、写真をローカルに書き込み、フロントエンドに送り返す
private final String writePath = "F:\\images"; //写入本地保存的绝对路径
private final String savePath = "/images/"; //写入数据库中的路径
@RequestMapping(value = "/changePhoto")
@ResponseBody
public Map<String,String> changePhoto(@RequestParam MultipartFile photo, @RequestParam Long userId){
Map<String,String> data = new HashMap<>();
if (photo.isEmpty()){
data.put("code","error");
data.put("msg","上传图片为空！");
return data;
}
//获取MultipartFile文件的后缀
String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1);
//限制只能上传三种图片格式,不要使用==，因为他是比较基本数据类型的，String是对象
if (suffix.equalsIgnoreCase("jpg") ||
suffix.equalsIgnoreCase("jpeg") ||
suffix.equalsIgnoreCase("png")){
OutputStream os = null;
InputStream inputStream = null;
String fileName = (userId + "") + System.currentTimeMillis() + ".jpg";
String userUrl = savePath+fileName;
try {
inputStream = photo.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
try {
byte[] bs = new byte[1024];
int len;
// 输出的文件流保存到本地文件
File tempFile = new File(writePath);
if (!tempFile.exists()) {
tempFile.mkdirs();
}
os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);
// 开始读取
while ((len = inputStream.read(bs)) != -1) {
os.write(bs, 0, len);
}
os.flush();
userService.updateUserUserUrl(userId,userUrl);
System.out.println(userUrl);
data.put("userUrl",userUrl);
data.put("code","success");
data.put("msg","修改头像成功");
return data;
} catch (IOException e) {
e.printStackTrace();
data.put("code","error");
data.put("msg","修改头像失败，请稍后重试！");
return data;
} catch (Exception e) {
e.printStackTrace();
data.put("code","error");
data.put("msg","修改头像失败，请稍后重试！");
return data;
} finally {
// 完毕，关闭所有链接
try {
os.close();
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}else {
data.put("code","error");
data.put("msg","上传头像格式需要为jpg、jpeg、png！");
return data;
}
}
2. MyWebMvcConfigurerを作成し、springboot2.xによって使用されるリソースマッピングパスを構成します。
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/images/**").addResourceLocations("file:F:/images/");
}
}
3.次に、変更が成功したことがわかります
