首页 > 解决方案 > 我如何将 blob / 任何二进制文件从 js 客户端传递到烧瓶服务器并正确解码

问题描述

我对烧瓶和 js 比较陌生。

尝试从录像机中获取 blob,并将其保存到服务器端的视频文件中:

recorder = new RecordRTCPromisesHandler(stream, { mimeType: 'video/webm', bitsPerSecond: 128000 }); ... ... 让 blob = recorder.getBlob(); ......

并发送到烧瓶

var form = $('<form style="position: absolute; width: 0; height: 0; opacity: 0; display: none; visibility: hidden;" method="POST"; enctype="multipart/form-data "; action= "{{ url_for("users.user_question", filename=video_blob) }}">');

 form.append('<input type="hidden" name="video" value='+blob+'>');
 $("body").append(form);
 form.submit();

... Flask 得到了一些东西(不知道如何验证它是一个真正的视频二进制文件(?)):

...

...

数据 = request.form.getlist('video')

...

#print data -> 显示:['[object']

if data:

    with open("c:/test/file.webm", "wb") as vid:
            video_stream = bytes(data)#request.files['video'].read()
            vid.write(video_stream)
            return Response()

出现错误:“str”对象不能解释为整数

  1. 这是在客户端和烧瓶之间进行文件传输的正确方法吗?
  2. 我怎样才能确保它是一个真正的二进制文件并将其保存为视频?

谢谢!

标签: javascriptpythonflaskblob

解决方案


不,这不是正确的方法。您不能只是将 blob 放入输入字段并希望获得最好的结果。

您也许可以编造一个FormData对象并使用fetch()它来发布它:

const url = "{{ url_for("users.user_question", filename=video_blob) }}";
const formData = new FormData();
formData.append("video", blob);
fetch(url, {
  method: 'POST',
  body: formData,
}).then(res => {
  if(res.ok) alert('OK!');
}).catch(err => {
  alert(err);   
});

关于二进制数据的格式,这取决于生成它的库。文档并没有说得很清楚。


推荐阅读