websocket怎么上传大的文件、图片，文件大了发现会断线

Question

我用canvas做了图片编辑功能，因为需要上传原图我选了canvas.toDataURL("image/png")，现在拿到base64格式的图片，用websocket发送时，发现文件太大会断开连接报错1009，似乎是限制了在1024个字符内才能发送。
有人说把数据拆分了 分段传输，但是不知道以什么来拆，求指点

const message = {
    message: {
        base64Img:'data:image/png;base64,iVBORw0K...'//后面省略10w+字符
    },
}
websocket.send(JSON.stringify(message));

Answer 1

先将base64转为blob

var convertBase64ToBlob = function(base64){
    var base64Arr = base64.split(',');
    var imgtype = '';
    var base64String = '';
    if(base64Arr.length > 1){
        //如果是图片base64，去掉头信息
        base64String = base64Arr[1];
        imgtype = base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';'));
    }
    // 将base64解码
    var bytes = atob(base64String);
    //var bytes = base64;
    var bytesCode = new ArrayBuffer(bytes.length);
     // 转换为类型化数组
    var byteArray = new Uint8Array(bytesCode);
    
    // 将base64转换为ascii码
    for (var i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);
    }
   
    // 生成Blob对象（文件对象）
    return new Blob( [bytesCode] , {type : imgtype});
};

然后用ajax上传