react-player 上传和播放新视频答案

【问题标题】：react-player uploading and playing new videoreact-player 上传和播放新视频
【发布时间】：2020-11-09 12:03:44
【问题描述】：

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

<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');
 });

})

【问题讨论】：

标签： reactjs express video react-player

【解决方案1】：

每次上传新文件时，我都能通过用不同的名称保存文件来解决这个问题。问题在于 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')
});
})

【讨论】：