反应打字稿视频预览

Question

我正在尝试为一个内部项目创建一个视频预览，使用下面的反应钩子的“React & Typescript”是组件代码，

import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {

    const { register, handleSubmit } = useForm<INewVideo>();
    const [file, setFile] = useState<any>();
 
    const videoChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.currentTarget.files![0]);
        setFile(event.currentTarget.files![0])
    };
    useEffect(() => {
        console.log("use effect", file)

    }, [file])

    return (<div>
        <input
            accept="video/mp4, video/mov"
            onChange={videoChangeHandler}
            type="file"
        />
        {
            file ? (
                <div>
                    {file}
                </div>
            ) : ("No Video")
        }
    </div>)
};

export default NewVideo;

但我无法设置文件，它抛出错误 我需要渲染上传视频并提供屏幕捕获和修剪功能的选项。但这些都是后期

Answer 1

您收到此错误是因为 file 不是您尝试在 DOM 中呈现的 JSX.Element。基本上你的file state 中有一些Object。您可以将其作为HTML.Video 元素的源提供，也可以从中获取文件对象数据。

{
  file ? <div> {file.name}</div> : "No Video";
}

此代码应在您的屏幕上打印文件名。这是您遇到错误的主要地方。

或者，如果您想显示您最近上传的视频的预览，您只需将该文件对象作为HTML.Video src 传递。喜欢它：

{
  file ? <div> <video src={URL.createObjectURL(file)} autoPlay /></div> : "No Video";
}

这将显示您的视频预览。

Answer 2

我在下面找到了

import React, { useEffect, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';

const NewVideo: React.FC = () => {

    const { register } = useForm<INewVideo>();
    const [file, setFile] = useState<any>();

    const videoChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.currentTarget.files![0];
        console.log("File", file);
        const reader = new FileReader();
        reader.addEventListener("load", () => {
            setFile(reader.result);
        });
        reader.readAsDataURL(event.target.files![0]);
    };
    useEffect(() => {
        console.log("use effect", file)

    }, [file])

    return (<div>
        <input
            {...register("Link")}
            accept="video/mp4, video/mov"
            onChange={videoChangeHandler}
            type="file"
        />
        <video controls src={file} />
    </div>)
};

export default NewVideo;