How does websocket upload large files and pictures? if you find a large file, you will be disconnected. - Codes Helper - Programming Question Answer

How does websocket upload large files and pictures? if you find a large file, you will be disconnected.

I used canvas to do the picture editing function, because I chose canvas.toDataURL ("image/png") to upload the original image. Now I get the picture in base64 format. When I send it with websocket, I find that the file will be disconnected and report error 1009, which seems to be limited to 1024 characters before it can be sent.
some people say that the data is split and transmitted in segments, but they don"t know what to do with it. Ask for advice

const message = {
    message: {
        base64Img:"data:image/png;base64,iVBORw0K..."//10w+
    },
}
websocket.send(JSON.stringify(message));

Javascript html html5 node.js websocket

Jan.08,2022

convert base64 to blob first

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);
    
    // base64ascii
    for (var i = 0; i < bytes.length; iPP) {
        byteArray[i] = bytes.charCodeAt(i);
    }
   
    // Blob
    return new Blob( [bytesCode] , {type : imgtype});
};

then upload using ajax

Previous: Click event problem of vue

Next: Golang's gorm defines a field to hold the picture list question

Menu