react上传视频预览

在React中预览视频可以通过使用HTML5中的video标签来实现。

以下是一个示例代码：

import React, { useState } from "react";
function VideoPreview() {
  const [file, setFile] = useState(null);
  const handleChange = (event) => {
    setFile(URL.createObjectURL(event.target.files[0]));
  return (
      <input type="file" onChange={handleChange} />
      {file && (
        <video width="320" height="240" controls>
          <source src={file} type="video/mp4" />
        </video>
    </div>
export default VideoPreview;
以上代码中，我们使用了React的useState Hook来管理文件的状态。当用户选择了文件，我们通过URL.createObjectURL()函数将其转换为可用于video标签的URL。最后，我们在页面上渲染video标签，并将转换后的URL作为其source标签的src属性。