推荐学习书目
› Learn Python the Hard Way
Python Sites
› PyPI - Python Package Index
› http://diveintopython.org/toc/index.html
› Pocoo
值得关注的项目
› PyPy
› Celery
› Jinja2
› Read the Docs
› gevent
› pyenv
› virtualenv
› Stackless Python
› Beautiful Soup
› 结巴中文分词
› Green Unicorn
› Sentry
› Shovel
› Pyflakes
› pytest
Python 编程
› pep8 Checker
Styles
› PEP 8
› Google Python Style Guide
› Code Style from The Hitchhiker's Guide
moxiaowei
V2EX  ›  Python

js 的 websocket 上传文件的问题

  •  
  •   moxiaowei · May 20, 2019 · 5511 views
    This topic created in 2727 days ago, the information mentioned may be changed or developed.
    使用 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 行不通!
    18 replies  •  2019-05-21 09:22:01 +08:00
    whypool
    whypool
    May 20, 2019
    1
    搞笑是么,用 2 进制传用 2 进制写啊
    dream10201
    dream10201
    May 20, 2019
    2
    看来是面向百度编程的
    TomVista
    TomVista
    May 20, 2019
    3
    接收到流后,写入到文件中,修改文件名,文件后缀.
    moxiaowei
    moxiaowei
    OP
    May 20, 2019
    4
    @whypool 关键写入之后 数据错误啊 我也知道二进制传二进制写啊
    moxiaowei
    moxiaowei
    OP
    May 20, 2019
    5
    @dream10201 我面向 360 编程
    jaylee77
    jaylee77
    May 20, 2019
    6
    讲道理 用 websocket 上传文件这种操作我还是第一次见
    lzvezr
    lzvezr
    May 20, 2019 via iPhone
    7
    ws 也需要指定为二进制传输的
    websocket.binaryType = 'arraybuffer'
    moxiaowei
    moxiaowei
    OP
    May 20, 2019
    8
    @jaylee77 web 聊天室内,一个用户发一张图片,不用这个?难道您有更好的方案?
    jaylee77
    jaylee77
    May 20, 2019
    9
    @moxiaowei 你思维也太局限了吧,用户发的图片当前上传到 cdn 啊,通过 websocket 发送图片地址,这不比你用 websocket 上传图片好?
    shadowyue
    shadowyue
    May 20, 2019
    10
    发图片你单独走一个 http 不行吗
    https://stackoverflow.com/questions/16800979/can-a-websocket-switch-its-binarytype-on-the-fly

    动态改变 binaryType 可能不是那么好处理
    ipwx
    ipwx
    May 20, 2019
    11
    实在不行楼主你用 base64 编码一下呗。。
    moxiaowei
    moxiaowei
    OP
    May 20, 2019
    12
    @jaylee77 对的 谢谢你 我是真的不知道
    meepo3927
    meepo3927
    May 20, 2019
    13
    先保存图片,再推送图片 URL、保存图片 URL 比较好。

    毕竟图片以压缩格式(jpg, png 等)存储和访问,更高效。
    br00k
    br00k
    May 20, 2019
    14
    不走 CDN,人多了你服务器感觉都要爆炸。
    IsaacYoung
    IsaacYoung
    May 20, 2019 via iPhone
    15
    联系 http 上传 cdn,websocket 只发链接
    plqws
    plqws
    May 20, 2019
    16
    用 websocket 传文件也太魔幻了,老老实实用 http
    opengps
    opengps
    May 20, 2019 via Android
    17
    怎么会这么用,大文件传输并不占优势
    moxiaowei
    moxiaowei
    OP
    May 21, 2019
    18
    好的 谢谢大家
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   918 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 20:19 · PVG 04:19 · LAX 12:19 · JFK 15:19
    ♥ Do have faith in what you're doing.