js 的 websocket 上传文件的问题

2019-05-20 13:51:26 +08:00
 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 行不通!
4259 次点击
所在节点    Python
18 条回复
whypool
2019-05-20 14:05:09 +08:00
搞笑是么,用 2 进制传用 2 进制写啊
dream10201
2019-05-20 14:07:24 +08:00
看来是面向百度编程的
TomVista
2019-05-20 14:10:06 +08:00
接收到流后,写入到文件中,修改文件名,文件后缀.
moxiaowei
2019-05-20 14:51:17 +08:00
@whypool 关键写入之后 数据错误啊 我也知道二进制传二进制写啊
moxiaowei
2019-05-20 14:51:41 +08:00
@dream10201 我面向 360 编程
jaylee77
2019-05-20 14:56:54 +08:00
讲道理 用 websocket 上传文件这种操作我还是第一次见
lzvezr
2019-05-20 15:12:25 +08:00
ws 也需要指定为二进制传输的
websocket.binaryType = 'arraybuffer'
moxiaowei
2019-05-20 15:39:22 +08:00
@jaylee77 web 聊天室内,一个用户发一张图片,不用这个?难道您有更好的方案?
jaylee77
2019-05-20 15:45:15 +08:00
@moxiaowei 你思维也太局限了吧,用户发的图片当前上传到 cdn 啊,通过 websocket 发送图片地址,这不比你用 websocket 上传图片好?
shadowyue
2019-05-20 15:45:41 +08:00
发图片你单独走一个 http 不行吗
https://stackoverflow.com/questions/16800979/can-a-websocket-switch-its-binarytype-on-the-fly

动态改变 binaryType 可能不是那么好处理
ipwx
2019-05-20 15:50:06 +08:00
实在不行楼主你用 base64 编码一下呗。。
moxiaowei
2019-05-20 15:51:12 +08:00
@jaylee77 对的 谢谢你 我是真的不知道
meepo3927
2019-05-20 18:29:53 +08:00
先保存图片,再推送图片 URL、保存图片 URL 比较好。

毕竟图片以压缩格式(jpg, png 等)存储和访问,更高效。
br00k
2019-05-20 18:55:57 +08:00
不走 CDN,人多了你服务器感觉都要爆炸。
IsaacYoung
2019-05-20 18:57:38 +08:00
联系 http 上传 cdn,websocket 只发链接
plqws
2019-05-20 19:24:16 +08:00
用 websocket 传文件也太魔幻了,老老实实用 http
opengps
2019-05-20 21:31:29 +08:00
怎么会这么用,大文件传输并不占优势
moxiaowei
2019-05-21 09:22:01 +08:00
好的 谢谢大家

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/565811

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX