0

我正在使用multer-gridfs-storage并将gridfs-stream我的视频存储在后端（Express/Node）中。当我尝试检索要在我的前端（React）上播放的文件时，播放器拒绝识别源。

我正在使用 Video-React 来显示下载的视频。下载成功，我从后端得到一个二进制字符串，我将其转换为 Blob。

 try{
      fileBlob = new Blob([res.data], {type : res.headers['content-type']});
    }catch(err){
      console.log('Error converting to blob');
      console.log(err);
    }

这是我正在渲染的 Video-React 播放器

 <Player 
      autoPlay
      ref="player"
      >
      <source src={this.state.fileURL} />
      <ControlBar autoHide={false} />
      </Player>

然后我尝试了两种技术

  1. readDataAsURL

    let reader = new FileReader(); reader.onload = function(event){ //rThis is just a reference to the parent function this rThis.setState({fileURL: reader.result}, () => { rThis.refs.player.load(); }); } try{ reader.readAsDataURL(fileBlob); }catch(err){ console.log('Error trying readDataURL'); console.log(err); }

src设置正确，但视频永远不会加载

  1. URL.createObjectURL

    let vidURL = URL.createObjectURL(fileBlob); rThis.setState({fileURL: vidURL}, () => { rThis.refs.player.load(); });

src设置为blob:url 但仍然没有

这是 Video-react 的问题还是我应该做其他事情？我可以查看的任何指向引用的指针也会有所帮助。我究竟做错了什么？dataURL 适用于图像，我检查过，但不适用于视频。

4

1 回答 1

0

因此，经过更多阅读，我终于弄清楚了问题所在。由于我正在使用gridfs-stream，我实际上是在通过管道传输来自服务器的响应。所以我从来没有得到整个文件，而试图转换res.data只是一个块，是一个错误。相反，在我的res对象中，我在属性中找到了源 URL config。

res.config.url

这包含我的服务器将块传输到的源 URL。考虑到我正是出于这个原因选择了 GridFS 存储，应该早点想出来。

于 2018-09-25T11:06:57.533 回答