时间戳

首页 > 解决方案 > react-player 上传和播放新视频

reactjs - react-player 上传和播放新视频

问题描述

我正在通过快速服务器将视频上传到反应的公共文件夹并使用钩子作为文件名。如果它是一个大的视频文件，上传后反应播放器开始正确播放。但是如果文件很小，播放器不会运行它，我必须在一段时间后重新加载它才能工作。此外，如果在大文件之后上传小文件，则会返回无法满足的错误范围。反应球员：

<ReactPlayer
      url={
        filePath
      }
      class="react-player" width="100%"
      ref={ref}
      controls={true}
      onDuration={setDuration}
    />

Axios 连接：

useEffect(() => {
const request = () => {
  if (serverPath === 'http://localhost:5000/upload') {
    const datatoSend = new FormData()
    datatoSend.append('file', myFile)
    const fetchdata = async () => await axios.post(serverPath, datatoSend, {
      onUploadProgress: ProgressEvent => {
        setLoaded(ProgressEvent.loaded / ProgressEvent.total * 100)
      }
    })
    const result = fetchdata()
     result.then(res => {

      if (res.data ==='Server Connected') {
        setFilePath('CurrentMedia.mp4')
      }
    })
  }
 }
}, [serverPath])

快递代码：

app.post("/upload", async (req, res) => {
    console.log('/ route called')

    const file = req.files.file

    await file.mv(`${__dirname}/client/public/CurrentMedia.mp4`, (err) => {
    if (err) {
        console.error(err);
        return res.status(500).send(err);
    }
    res.send('Server Connected');
 });

})

标签： reactjsexpressvideoreact-player

解决方案

每次上传新文件时，我都可以通过用不同的名称保存文件来解决这个问题。问题在于 react-player 尝试运行具有相同名称的新视频文件。由于文件名相同，因此它运行之前缓存的文件名。

只是在 express 中执行此操作并在 react 中更新钩子分别修复它

app.post("/upload",  async (req, res) => {
console.log('/ route called')

const file = req.files.file
const name = file.name

file.mv(`${__dirname}/public/${name}`, (err) => {
if (err) {
  console.error(err);
  return res.status(500).send(err);
}
res.send('Server Connected');
console.log('Server Connected')
});
})

推荐阅读