javascript - 在 React 中使用 Form.File 时找不到文件

Question

我正在尝试使用他们在 React 中的 API 将视频上传到 Vimeo。我有以下内容：

import React, { useEffect } from 'react';
import { Card, Container, Button, Form } from 'react-bootstrap';
import { vimeoClient } from '../../vimeo';
import { useState } from 'react';

const VideoUpload = () => {
    const [fileName, setFileName] = useState();

    const uploadHandler = e => {
        e.preventDefault()
        console.log(fileName);

        vimeoClient.upload(
            fileName,
            {
                'name': 'TEST TEST',
                'description': 'TEST DESC'
            },
            function (uri) {
                console.log('Your video URI is: ' + uri);
            },
            function (bytes_uploaded, bytes_total) {
                var percentage = (bytes_uploaded / bytes_total * 100).toFixed(2)
                console.log(bytes_uploaded, bytes_total, percentage + '%')
            },
            function (error) {
                console.log('Failed because: ' + error)
            }
        );
    };

    return (
        <Container
            className="d-flex flex-column mt-5 justify-content-center align-items-center"
        >
            <Card className="w-100" style={{ maxWidth: "400px" }}>
                <Card.Body>
                    <h2 className="text-center mb-4">Video Upload</h2>
                    <Form onSubmit={uploadHandler}>
                        <Form.Group className="mb-4" id="file">
                            <Form.Label>File</Form.Label>
                            <Form.File type="file" required onChange={ e => setFileName(e.target.files[0].name) } />
                        </Form.Group>
                        <Button className="w-100" variant="dark" type="submit">
                            Upload
                        </Button>
                    </Form>
                </Card.Body>
            </Card>
        </Container>
    );
};

export default VideoUpload;

Vimeoapi 需要path_to_a_video_on_the_file_system作为参数，这里我使用的是fileName. 但是，当我调用 API 时出现错误Failed because: Unable to locate file to upload.

看来我没有正确获得路径。如何使用 获取视频的路径Form.File？

标签： javascriptreactjsvimeo