猿问

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

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

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


万千封印
浏览 1017回答 1
1回答

守着一只汪

先将base64转为blobvar&nbsp;convertBase64ToBlob&nbsp;=&nbsp;function(base64){&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;base64Arr&nbsp;=&nbsp;base64.split(',');&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgtype&nbsp;=&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;base64String&nbsp;=&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp;if(base64Arr.length&nbsp;>&nbsp;1){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//如果是图片base64,去掉头信息 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base64String&nbsp;=&nbsp;base64Arr[1]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgtype&nbsp;=&nbsp;base64Arr[0].substring(base64Arr[0].indexOf(':')+1,base64Arr[0].indexOf(';')); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;将base64解码 &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bytes&nbsp;=&nbsp;atob(base64String);&nbsp;&nbsp;&nbsp;&nbsp;//var&nbsp;bytes&nbsp;=&nbsp;base64; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bytesCode&nbsp;=&nbsp;new&nbsp;ArrayBuffer(bytes.length);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;转换为类型化数组 &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;byteArray&nbsp;=&nbsp;new&nbsp;Uint8Array(bytesCode);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;将base64转换为ascii码 &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;bytes.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;byteArray[i]&nbsp;=&nbsp;bytes.charCodeAt(i); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;生成Blob对象(文件对象) &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Blob(&nbsp;[bytesCode]&nbsp;,&nbsp;{type&nbsp;:&nbsp;imgtype}); };然后用ajax上传
随时随地看视频慕课网APP

相关分类

Html5
我要回答