一开始呢,是准备通过json格式上传图片到服务器,但是报了一个没有边界的错误("exception":"the request was rejected because no multipart boundary was found"),查了一下,发现通过form表单上传文件的话,请求头会自带这个boundary,看来问题就出在这里了。
但是我们是用ajax上传啊,不是用form表单,于是乎,创建一个formdata,把canvas的数据放进去,再上传到服务器。
function fileUploadSign() {
var form = $("<form id=\"addForm\">\n" +
" <input type=\"text\" name=\"fileType\" value=\"1\"/>\n" +
"</form>");
var param = new FormData(form[0]);
var src = canvas.toDataURL("image/png");//这里转成的是base64的地址,直接用到img标签的src是可以显示图片的
var blob = dataURItoBlob(src);
param.append('source_from', 'webpage_upload');//在formdata加入需要的参数
param.append('file', blob, "--image" + new Date().getTime() + "client_signature.png");
$.ajax({
url: url,
type: "POST",
data: param,
processData: false,
dataType: "json",
cache: false,
contentType: false,
success: function (response) {
},
error: function (xhr, status, error) {
}
})
}
是不是发现上面缺少一个方法,对的,这里还要将canvas的数据转换成Blob格式;
//图片转成Buffer
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
这样子就可以成功上传到服务器咯