js 的 websocket 上传文件的问题

[moxiaowei]

使用 js 的 websocket 上传文件至 websocket 服务器
html 代码如下：
var inputElement = document.getElementById("file");
var fileList = inputElement.files;
var file=fileList[0];
if(!file) return;
var reader = new FileReader();
reader.readAsArrayBuffer(file);//以二进制形式读取文件
//文件读取完毕后该函数响应
reader.onload = function loaded(evt) {
var ext = file.name.split(".")[1];
websocket.send("fileStart|"+ext+"|");
var blob = evt.target.result;
websocket.send(blob);//发送二进制表示的文件
console.log("finish");
}
};
但是服务器接收到的是：
文件数据为：bytearray(b'x\xed\x8f\xebC\x8f\x80\rrl\x00\x8c\xa77-\xe8\xd3;\xe3`0`<\x97I\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xbe\xb3\x07Jh\x14\xa5\xa5\x077\xe8\xd3\x02o\xb1\xd9\xe2\xe3}m\xfb\xe5~7\xa1\xf8d"\xe0\xb5\x07Jj/\x8b\xa4/\x01\xe2\xff\x15\xb4n\x08\xce\xb2:\x05\xdd\xe4gI\xbdc\x8d\xc2k8\xa0\xa6\x1f4\xeb\xcb0d\xb7\xe4h=\x9c\xac3\x1a\x07J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#u\xbd\x8a\x04\xa4\x1b(\xeb\xcb8e\x9d\xce`<\x97c\xfb\xf7wv\xe7\xefx0\xea\x8a\x04\xa6 \x06\xea\xe3\x0eo\xb1\xd9\xff\xe1f+\xc1\xb5;u\xd8\xcb\x07pl\x00\x8c\xa5\x190\xe8\xcf\x18f\x94\xf9i\x05\xaa\xa6\x10\x0e\xe8\xf85o\xb1\xd9\x85\x89D\x13`<\x97r\xb6\xb2#r\xb9\xb8#r\xa1\xb1>I\x86g\x99\xebi\x08\xba\xa6\x1f\r\xe2\xff\x15\xf3`"\xfd\xf4t \xe0\xee\x07Jj/\x8b\xa4/\x01\xe2\xff\x15\xf3`"\xfd\xf4t \xe0\xee\x07I\xbbc\x8d\xc2j\x1c\xbd\xa4\'\x0e\xe5\xfe)i\x95\xdci5\x86\xab \x15\xeb\xdf\x02e\x87\xe2j\x19\xa5\xac3\x1a\x07J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#r\xbc\x8a\x04\xa4\x1b(\xeb\xcb8e\x9d\xce`<\x97/\xfc\xe3e&\xeb\xf5dI\x86e\xa2\xc5h \x8c\xac3\x1aOu\xff\xc8o.\xe2\xcaIv\xd8\xd3`-\xcd\xf0\x07Ji\x15\xbd\xa5\x02.\xe8\xf9\x1cd\xb2\xe2i\x01\xa2\xac3\x1a\x07J\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xbe\xb3\x07J\x86g\x99\xebi\x08\xba\xa6\x1f\r\xe2\xff\x15\xec~ \xe7\xe5i6\xe6\x8a\x04Jj/\x8b\xa4/\x01\xe2\xff\x15\xce;p\xc1\xb6?:\xca\xd9:!\xc4\xb5kp\xe9\x8a\x07vl\x00\x8c\xa77\x00\xe5\xe1\x04g\x84\xd8j%\xbb\xa5\x154\xe5\xf6?f\xb8\xc8g/\x98\xa5\x13\r\xe8\xc9.e\x94\xeb`<\x97I\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xbe\xb3\x07Jh\x14\xa5\xa5\x077\xe8\xd3\x02o\xb1\xd9\xe2\xe9a(\xd0\xf4h0\xfb\xdfu*\xee\xef8I\x86e\xa2\xc5h \x8c\xac3\x1aL!\xb8\xe6G&\xea\xd257\xb9\xb8E\x11\xd6\xe8\x07Ji\x15\xbd\xa5\x02.\xe8\xf9\x1cd\xb2\xe2i\x01\xa2\xac3\x1a\x07J\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xbe\xb3\x07J\x86g\x99\xebi\x08\xba\xa6\x1f\r\xe2\xff\x15\xedd/\xe4\xdfy&\xfc\xf4R;\xe6\xe1bv\x85\x89\x04\xa6 \x06\xea\xe3\x0eo\xb1\xd9\xe6\xf0o\x12\xfc\xf3\\&\xbc\xdaL%\xba\xda]\t\x85\x8a\x07ul\x00\x8c\xa77-\xe8\xe7&f\x86\xd8g\x01\x95\xa5:\x0b\xe5\xec\x1af\x91\xcej\n\xac\xa6\x16(\xe2\xff\x15\x8a\x04\n\xdfo\xb1\xd9\xbe\xb9?m\xbe\xb65m\xbe\xae<p\x85\x89\xea\xd7\'f\x85\xf4j\x10\x80\xac3\x1aw7\xf5\xf0d-\x85\x89\xe8\xec\tg\xad\xc2`<\x97;\xe2\xd9yw\xed\xd2U\x12\xbd\xd3H{\xe7\xf0@I\x86f\x98\xf3i\r\xa3\xa65\x13\xe9\xfc.f\x8c\xec`<\x97I\x86\x89D\x13`<\x97r\xb6\xb2#r\xb9\xb8#r\xa1\xb1>I\x86\x89\xea\xd7\'f\x85\xf4j\x10\x80\xac3\x1aw7\xf5\xf0d-\x85\x89\x04\xa6 \x06\xea\xe3\x0eo\xb1\xd9\xeb\xd0c:\xfb\xf0;\x07\xeb\xb2d\x05\xdd\xcd`&\x85\x8a:\xa0\x0f\x01\xe9\xfb"e\xa9\xeai\x0b\x96\xab\x0e\x18\xeb\xee,e\xb1\xcci\x1c\x80\xac3\x1a\x07J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#u\xbd\x8a\x04\xa4\x1b(\xeb\xcb8o\xb1\xd9\xf5\xf4w3\xd0\xf8d"\xe0\xb5R \xe1\x8a\x04\xa6 \x06\xea\xe3\x0eo\xb1\xd9\xb8\xd7e9\xba\xf3N1\xed\xf4_\x06\xee\xd1U%\x85\x89\xeb\xd6?f\x80\xedj:\x9e\xa70!\xeb\xc2 o\xb1\xd9\x85\x89\x04\n\xdfo\xb1\xd9\xbe\xb9?m\xbe\xb65m\xbe\xae;q\x85\x89\x04\xa5\x1a0\xeb\xce!e\xb7\xd0j\x10\x80\xac3\x1aw7\xf5\xf0R;\xe6\xe1bv\xd0\xe3cI\x86\x89\xea\xd7\'f\x85\xf4`<\x979\xfb\xfa}\x1c\xf7\xe9l,\xba\xdfn-\x85\x89\x04\xa6 \x06\xea\xe3\x0eo\xb1\xd9\xc1\xc1d\x07\xc8\xcdN\'\xff\xd2@+\xdd\xb8i\x17\x85\x8a5\xa0\x0f\x01\xeb\xda g\xaa\xc3j$\xa4\xa6!\x01\xeb\xee,e\xb1\xcci\x1c\x80\xac3\x1a\x07J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#u\xbd\x8a\x04\xa4\x1b(\xeb\xcb8e\x9d\xce`<\x974\xea\xe9R;\xe6\xe1bv\xd0\xe3cI\x86e\xa2\xc5h \x8c\xac3\x1ag\x0e\xe2\xe3O\x14\xe4\xeaL4\x85\x89\xeb\xd6?f\x80\xedj:\x9e\xa70!\xeb\xc2 o\xb1\xd9\x85\x89\x04\n\xdfo\xb1\xd9\xbe\xb9?m\xbe\xb65m\xbe\xae;q\x85\x89\x04\xa4\x1b(\xeb\xcb8e\x9d\xce`<\x974\xea\xe9R;\xe6\xe1bv\xd0\xe3cI\x86\x89\xe8\xec\tg\xad\xc2`<\x97+\xed\xd0^"\xb8\xf2Z\x19\xb8\x8a\x07zl\x00\x8c\xaa\x12\x12\xeb\xdd\x13f\x84\xd0j\r\xac\xa5"#\xe8\xff\x00f\x91\xce`<\x97I\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xb9\xb2\x07Jh\x14\xa5\xa5\x077\xe8\xd3\x02o\xb1\xd9\xfe\xe7i"\xe4\xe1R;\xe6\xe1bv\xd0\xe3cI\x86e\xa2\xc5h \x8c\xac3\x1aZw\xfd\xf8>.\xdb\xc1n\x00\xd7\xeao\x10\xc8\xd3\x07Ji\x15\xbd\xa5\x02.\xe8\xf9\x1cd\xb2\xe2i\x01\xa2\xac3\x1a\x07J\x86\xc9]\xac3\x1a<z\xbd\xae<u\xb7\xae<m\xb9\xb2\x07J\x86g\x99\xebi\x08\xba\xac3\x1a|$\xeb\xe1f"\xd0\xf8d"\xe0\xb5R \xe1\x8a\x04Jj/\x8b\xa4/\x01\xe2\xff\x15\xc7;{\xd5\xb2f*\xcb\xe6g\x12\xb7\xd4Hp\xcd\x8a\x07I\x85\xb1=\xa0\x0f\x01\xe8\xdf?g\xa5\xcdh\x14\xa5\xab2&\xeb\xf6\x04h\xa2\xd6i\x1c\x80\xac3\x1a\x07J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#r\xbc\x8a\x04\xa4\x1b(\xeb\xcb8e\x9d\xce`<\x97\'\xfc\xe3i\x1c\xfb\xe5~7\xd0\xf8d"\xe0\xb5\x07Jj/\x8b\xa4/\x01\xe2\xff\x15\xd9d*\xfd\xe3w\x05\xe7\xe3>\x13\xec\xe1Y\x07\xf6\x8a\x04\xa5\x1a0\xeb\xce!e\xb7\xd0k?\xac\xa5\x0e/\xe2\xff\x15\x8a\x04J\xc6\xd0\xe2\xff\x15\xb14q\xa1\xb1;{\xa1\xb1#r\xbc\x8a\x04Jh\x14\xa5\xa5\x077\xe8\xd3\x02o\xb1\xd9\xeb\xf3n\'\xd0\xf4h0\xfb\xdfu*\xee\xef8I\x86\x89\xe8\xec\tg\xad\xc2`<\x971\xdf\xceN\x06\xea\xf3`\x12\xf7\xcacu\xbd\xd4yI')


这上面的二进制数据，我该如何处理？ decode 行不通！

[whypool]

搞笑是么，用 2 进制传用 2 进制写啊

[dream10201]

看来是面向百度编程的

[TomVista]

接收到流后,写入到文件中,修改文件名,文件后缀.

[moxiaowei]

@whypool 关键写入之后 数据错误啊 我也知道二进制传二进制写啊

[moxiaowei]

@dream10201 我面向 360 编程

[jaylee77]

讲道理 用 websocket 上传文件这种操作我还是第一次见

[lzvezr]

ws 也需要指定为二进制传输的
websocket.binaryType = 'arraybuffer'

[moxiaowei]

@jaylee77 web 聊天室内，一个用户发一张图片，不用这个？难道您有更好的方案？

[jaylee77]

@moxiaowei 你思维也太局限了吧，用户发的图片当前上传到 cdn 啊，通过 websocket 发送图片地址，这不比你用 websocket 上传图片好？

[shadowyue]

发图片你单独走一个 http 不行吗
https://stackoverflow.com/questions/16800979/can-a-websocket-switch-its-binarytype-on-the-fly

动态改变 binaryType 可能不是那么好处理

[ipwx]

实在不行楼主你用 base64 编码一下呗。。

[moxiaowei]

@jaylee77 对的 谢谢你 我是真的不知道

[meepo3927]

先保存图片，再推送图片 URL、保存图片 URL 比较好。

毕竟图片以压缩格式(jpg, png 等)存储和访问，更高效。

[br00k]

不走 CDN，人多了你服务器感觉都要爆炸。

[IsaacYoung]

联系 http 上传 cdn,websocket 只发链接

[plqws]

用 websocket 传文件也太魔幻了，老老实实用 http

[opengps]

怎么会这么用，大文件传输并不占优势

[moxiaowei]

好的 谢谢大家