HTML5 视频不显示来自 axios 反应数据获取的视频

Question

我的视频播放器页面出现问题，无法找到与视频文件关联的数据。我不断收到 404 not found 或“undefined error coming from axios code snippet of my code 因为那是它的控制台日志所在的位置。但是，数据对象也出现在控制台中但是 url 仍然未定义，视频播放器也是如此。

这是后端的代码，这是通过路由： upload.js:

const { sequelize, video } = require('../models');

    router.post("/getVideo", async (req, res) => {
        
            try {
                const getvideo = await video.findOne({
                    "_id" : req.body.videoId
                })
        
                return res.json(getvideo)
            } catch (err) {
                console.log(err)
                return res.status(500).json({ error: 'Something went wrong' });
            }
        })

sequeilize 控制台似乎可以正常工作

这是前端代码： Detailvideopage.js

const DetailVideoPage = (props) => {
        let { videoId } = useParams();
        const [video, setVideo] = useState([]);
    
        const videoVariable = {
            videoId: videoId
        }
    
        useEffect(() => {
            axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
                headers: {
                    'accept': 'application/json',
                },
            })
            .then(response => {
                if (response.data.success) {
                    console.log(response.data.video)
                    setVideo(response.data.video)
                    console.log(response.data.success);
                } else {
                    console.log(response.data);
                    alert('Failed to get video Info')
                }
        }).catch(error => {
                        console.log(error);
                    });
    
    }, []);
    
        return (
            <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
            <video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>
    
            </div>
        );
    }

这是我从本地主机页面收到的错误图片：localhost console

这是前端的路由：从 './components/views/DetailVideoPage/DetailVideoPage';

导入 DetailVideoPage

<Router>
      <Routes>
      <Route exact path='/video/:videoId' element={<DetailVideoPage />} />
      </Routes>
    </Router>

更新：我已重命名问题以更准确地显示问题的性质。主要问题是即使获取了数据，也没有显示视频。

Answer 1

用于测试...看看这是否会在页面上显示视频：

const DetailVideoPage = (props) => {
        let { videoId } = useParams();
        const [video, setVideo] = useState([]);
    
        const videoVariable = { videoId: videoId }
        
        var myDiv; var myVid;
    
        useEffect(() => {
            axios.post('http://localhost:5000/api/upload/getVideo', videoVariable, {
                headers: {
                    'accept': 'application/json',
                },
            })
            .then(response => {
                if (response.data.success) 
                {
                    console.log(response.data.video)
                    setVideo(response.data.video)
                    console.log(response.data.success);
                    
                    ///////////////////////////////////
                    //# test adding of Video
                    
                    //# create the Div
                    myDiv = document.createElement('div');
                    myDiv.setAttribute("id", "myDiv");

                    //# create the Video object
                    myVid = document.createElement( "video");
                    myVid.setAttribute("id", "myVid");
                    myVid.setAttribute("controls", "true" );
                    myVid.setAttribute("height", "500");
                    myVid.setAttribute("src", path);
                    myVid.load();

                    //# add Video into Div, then finally add Div to page
                    myDiv.appendChild( myVid );
                    document.body.appendChild( myDiv );
                    
                    ///////////////////////////////////
                } 
                else 
                {
                    console.log(response.data);
                    alert('Failed to get video Info')
                }
        }).catch(error => {
                        console.log(error);
                    });
    
    }, []);
        
        //# If needed... see if returning the Div works...
        //return ( myDiv );
        
        /*
        return (
            <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }} >
            <video style={{ width: '100%' }} src={`http://localhost:5000/${video.filePath}`} controls></video>
    
            </div>
        );
        */
}

Answer 2

解决方案：我根据 VC.One 的建议和一些研究找到了解决方案，非常感谢他！

我重构了我的一些代码 DetailVideoPage.JS:

function DetailVideoPage() {
  const [Video, setVideo] = useState([]);

  const videoId = useParams();

  const videoVariable = {
    videoId: videoId
  }

  useEffect(() => {

    const getSingleVideoData = async () => {
      axios.post('http://localhost:5000/api/upload/getVideo', videoVariable)
      .then(response => {
              console.log(response);
              setVideo(response.data.filePath);
            //   let myPath = response.data.filePath; 
            //   alert( "MP4 path is : " + myPath);
      })
      .catch(function (error) {
          console.log(error);
      });

    }
    getSingleVideoData();

  }, []);


  return (

    <>
      <Row>
          <Col lg={18} xs={24}>
          <div className="postPage" style={{ width: '100%', padding: '3rem 4em' }}>
          <video style={{ width: '100%' }} src={`http://localhost:5000/${Video}`} type='video/mp4' controls autoPlay muted />
          </div>
          </Col>
      </Row>

      </>
  )

}

HTML5 视频不显示来自 axios 反应数据获取的视频

HTML5 Video not displaying video from axios react data fetch

html5-video

http-status-code-404

sequelize.js

axios