Question

我不情愿地使用反应，但事实仍然是：当我建立一个带有输入的简单页面来上传本地文件时，如果我console.log实际文件一旦被选中，这就是我得到的从控制台：

File {name: "myfile.mp4", lastModified: 1474084788000, lastModifiedDate: Fri Sep 16 2016 23:59:48 GMT-0400 (EDT), webkitRelativePath: "", size: 27828905…}
lastModified: 1474084788000
lastModifiedDate: Fri Sep 16 2016 23:59:48 GMT-0400 (EDT)
name: "myfile.mp4"
size: 27828905
type: "video/mp4"
webkitRelativePath: ""
__proto__: File

所以文件加载到video标签中，我可以看到它。（代码如下......）

然后，如果我想加载相同的文件，而是从硬编码的完整路径加载，如下所示："file:///path/to/myfile.mp4"，会弹出错误This video file format is not supported.，我从控制台返回的内容是确切的我以前硬编码的路径相同。

我的问题是如何使用硬编码路径加载本地文件而不是从输入元素中选择文件？
OR
如何直接从本地路径创建objectURL？

在将文件传递给Blob函数之前，我已经尝试URL.createObjectURL该文件，但除非我做错了，否则它无效。

渲染功能代码：

  render() {

    return (
      <div>
        <input type="file" ref="input" onChange={this.upload} />

        <video ref="video" type="video/mp4" controls loop autoPlay width="720"></video>  
        <div ref="message"></div>
      </div>
    );
  }

功能：

  processs = (file) => {
      let fileURL = URL.createObjectURL(file);
      this.refs.video.src = fileURL;
  }

  playFile = (event) => {
    let file = event.target.files[0];
    console.log(file);

    //check if video can be played
    if(this.refs.video.canPlayType(file.type) != ""){
      this.processs(file);
    } else {
      this.refs.message.innerHTML = "This video file format is not supported."
    }

  };

Answer 1

如何直接从本地路径创建objectURL？

您可以XMLHttpRequest使用responseType设置为"blob"。 File继承自Blob，您可以将返回的Blob传递给期望File对象的现有函数。另请参阅Loading images from file with Javascript

var request = new XMLHttpRequest();
request.responseType = "blob";
request.open("GET", "file:///path/to/myfile.mp4");
request.onload = () => {
  // do stuff with `request.response` : `Blob`
}
request.send();

Answer 2

这是一个有效的演示

Load Image or Video without Upload

希望有所帮助

加载没有输入上传的视频文件

2 个答案: