我想将已调整大小的图像上传到服务器,但是当我尝试上传已调整大小的图像时,我收到“必需的MultipartFile参数'文件'不存在”错误。当我上传原始文件时没有问题。
脚本:
function resizeAndUpload(file) {
var reader = new FileReader();
reader.onloadend = function () {
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function () {
var MAX_WIDTH = 200;
var MAX_HEIGHT = 200;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0, tempW, tempH);
var dataURL = canvas.toDataURL("image/jpeg");
var data = new FormData();
data.append('file', dataURL);
$.ajax({
url: '/changeimage',
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
success: function () {
window.alert("uploaded")
}
});
}
}
reader.readAsDataURL(file);
}
服务器:
@RequestMapping(value = "/changeimage", method = RequestMethod.POST)
@ResponseBody
public String changeProfileImage(@Context HttpServletRequest request, @RequestParam("file") MultipartFile file) {
return "ok";
}
答案 0 :(得分:1)
数据网址是一个字符串,不会上传为文件 但是,您可以使用blob代替
...
ctx.drawImage(this, 0, 0, tempW, tempH);
canvas.toBlob(function(blob){
var data = new FormData();
data.append('file', blob);
$.ajax({
url: '/changeimage',
type: 'POST',
data: data,
cache: false,
contentType: false,
processData: false,
success: function () {
window.alert("uploaded")
}
});
});
...