canvas通过ajax上传到服务器

一开始呢，是准备通过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});
}

这样子就可以成功上传到服务器咯

参考自：https://www.cnblogs.com/zhenfei-jiang/p/8206146.html