URL.createObjectURL 不能异步工作（反应）

【问题标题】：URL.createObjectURL wouldn't work asynchronously (React)URL.createObjectURL 不能异步工作（反应）
【发布时间】：2021-09-25 07:27:47
【问题描述】：

URL.createObjectUrl 在我第一次上传后重新上传另一个文件时不起作用。 videoFile 已更新但未生成对象 url...

const [videoFile, setVideoFile] = useState<File>()

const uploadVideo = (selectorFiles: FileList | null) => {
  if(selectorFiles) {
    setVideoFile(selectorFiles[0])
  }
}

return (
  <>
    <video controls>
      <source src={URL.createObjectURL(videoFile)} />
    </video>
    <input type="file" onChange={(e) => uploadVideo(e.target.files)} />
  </>
)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

它有效。仅在文件存在时渲染视频元素。

请参阅Codesandbox 上的工作示例。

import { useState } from "react";

export default function App() {
  const [videoFile, setVideoFile] = useState();

  const uploadVideo = (selectorFiles) => {
    if (selectorFiles) {
      setVideoFile(selectorFiles[0]);
    }
  };

  return (
    <>
      {videoFile && (
        <video controls>
          <source src={URL.createObjectURL(videoFile)} />
        </video>
      )}
      <input type="file" onChange={(e) => uploadVideo(e.target.files)} />
    </>
  );
}

【讨论】：