Javascript 通过Websocket将文件从vue.js上载到flask后端

我正在寻找一个关于如何通过websocket将文件从Vue.js上传到flask后端并保存在那里的最小可复制示例。最好能上传更大的文件（几百MB）

模板：

    <template>
  <div>
  <form id='upload-form'>
    <input
      id='file-field'
      name='file'
      type='file' @change="onFileChange">
  </form>
      <button @click="uploadFile">Upload</button>
    </div>
</template>

烧瓶：

# need to save file etc.
@socketio.on('upload-file')
def save_file(data):
    print("Data received")
    print(data)

目前，flak在接收上载文件事件时出错。无论文件大小如何，都会出现错误：

消息处理程序错误

回溯（最近一次调用上次）：文件 “~ib/python3.8/site packages/engineio/server.py”，第549行，在 _触发事件 返回self.handlersevent文件“~lib/python3.8/site packages/socketio/server.py”，第730行，在 _处理eio消息 如果pkt.add_附件（数据）：文件“~lib/python3.8/site packages/socketio/packet.py”，第118行，在 添加附件 提升值错误（“意外的二进制附件”）值错误：意外的二进制附件

---

你的档案有多大？另外，请注意，您的问题措辞就像您正在使用Flask进行文件上载一样，但这都是Socket.IO，因此Flask没有参与此操作。测试了多种文件大小（0 kb、100kb、50MB），相同的错误消息此文件的类型是什么？这是实际数据还是文件对象？您不能发出文件对象，您需要读取文件并发送实际字节。

typeof this.file

返回“object”您可以记录它以准确了解其中的内容吗？您的文件有多大？另外，请注意，您的问题措辞就像您正在使用Flask进行文件上载一样，但这都是Socket.IO，因此Flask没有参与此操作。测试了多种文件大小（0 kb、100kb、50MB），相同的错误消息此文件的类型是什么？这是实际数据还是文件对象？您无法发出文件对象，您需要读取文件并发送实际字节。

typeof this.file

返回“object”您可以记录它以准确了解其中的内容吗？

# need to save file etc.
@socketio.on('upload-file')
def save_file(data):
    print("Data received")
    print(data)