在本地主机上渲染React App后如何导入/需要模块?

时间:2019-07-11 06:41:49

标签: arrays reactjs media cctv

我在React App中的渲染过程之后在React App中分配所需的媒体(视频)。但是在渲染完成后,它将不会将我的媒体文件视为静态文件。我所需模块的浏览器EncodeURL。

我有一堆CCTV录制文件,其位置存储在文本文件中。文本文件提供了一个响应应用的地址,该地址是需要应用内的各个模块。

import  React, {Component, Fragment} from "react";
import {Header} from "./header";
import * as fs from 'browserify-fs';  
import ReactFileReader from 'react-file-reader';
import dirlist from "./data.txt";
export default class Cam extends Component {

    constructor(props)
    {
      super(props);
      this.state={
        text: "",
        resource:[],
        };
    }

componentDidMount() 
  {
    this.readTextFile(this.props.txt);
      // this.timerFun()
  }

  readTextFile = file => {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", dirlist, true);
    rawFile.onreadystatechange = () => {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          var allText = rawFile.responseText;
          this.setState({
            text: allText
          });
        }
      }
    };
    rawFile.send(null);
  };

  render () 
        {
          let myar= [];

     let string = this.state.text.split("\n");
     for (var entry of string.entries()) {
          var entry = 'require("./' +entry+'")'
          // console.log(entry)

          this.state.resource.push(entry.replace(/[0-9],/,""))
           }

console.log(this.state.resource)
// console.log(this.state.data)

    return (
      // <Header></Header>
              // WRITE autoPlay in Beteween Video Tag for Auto Play
        <Fragment>
        <nav className="d-flex align-items-center">
            <div className="nav-title mr-auto">Sunbots</div>
            </nav>
            &nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;
            <div className="camui">

              <video  ref="vidF" onEnded={this.next.bind(this)}  width="440vw" height="230vh"  controls  src="" poster="https://i0.wp.com/anglicanfrontiers.com/wp-content/uploads/2019/01/Video-icon.png?ssl=1"></video>
              &nbsp;&nbsp;&nbsp;&nbsp;

            </Fragment>
      );
  }  
}

网络面板显示

当前:

http://localhost:3000/require(%22./cam04_2019_06_19__12_00_06.mp4%22)

(此处无法播放视频,因为javascript生成了所需模块的数组)

预期地址: http://localhost:3000/static/media/cam01_2019_06_19__12_00_06.a6576fe4.mp4

(这里可以播放视频,因为我已在文件中将文件预定义为必需的模块)

0 个答案:

没有答案