关键点：MultipartFile 如果需要使用 originalFileName 的扩展名来在服务器端生成文件，那么需要在前端 fromData() 使用三个入参的append方法
var form=new FormData();
form.append("file",result,"aa.png");
（感谢提供的基础框架 使用canvas上传图片+上传进度_邦杠的博客-CSDN博客）
<html>
<head>
<title>Canvas 文件上传</title>
</head>
<body>
<input type="file" id="myfile"/>
<canvas id="myCanvas" width="200" height="250" style="border:1px solid #d3d3d3;">
</canvas>
<button οnclick="test()">提交</button>
<img src="http://XXX/download?name=cae7319987cb486dacd1dc402f0d802d.png" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//选择图片后
myfile.οnchange=function () {
createURLImg(myfile.files[0]);
}
var pen=myCanvas.getContext("2d");
//加载入canvas
function createURLImg(file,callback) {
var imgUrl=URL.createObjectURL(file);
var image=new Image();
image.src=imgUrl;
image.οnlοad=function (ev) {
pen.drawImage(image,0,0,200,250);
if(callback) callback();
URL.revokeObjectURL(imgUrl);
}
}
//提交按钮
function test() {
myCanvas.toBlob(function (result) {
var form=new FormData();
form.append("file",result,"aa.png");
ajax(form);
})
}
function biafenb(r) {
if(!pen) pen=myCanvas.getContext("2d");
pen.save();
pen.globalAlpha=0.3;
pen.fillRect(0,(1-r)*200,200,250);
pen.globalAlpha=1;
pen.fillStyle = "white";
pen.font = "20px 微软雅黑";
pen.textAlign='center';
pen.fillText(Math.round(r*100)+"%",100,100);
pen.restore();
}
function ajax(formData) {
$.ajax({
url:"http://XXX/upload",
type:"post",
Accept:"html/text;chatset=utf-8",
contentType:false,
data:formData,
processData:false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
myXhr.upload.οnprοgress=function (ev) {
pen.clearRect(0,0,200,250);
createURLImg(myfile.files[0],function () {
biafenb(ev.loaded/ev.total);
})
}
return myXhr;
}, success: function (data) {
console.log("上传成功!!!!");
}, error: function () {
console.log("上传失败！");
}
})
}
</script>
</body>
</html>