Question

我有一个名为“上传”的按钮，可以将.mp4视频文件上传到浏览器。单击提交按钮后，视频文件应保存到服务器。为此，我必须使用rest api。

import React from 'react';

export class Upload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        selectedFile: null
    };

    this.onChangeHandler = this.onChangeHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}
onChangeHandler = event => {

    this.setState({
        selectedFile: event.target.files[0],
        loaded: 0,
    })
    console.log(event.target.files[0])

}

handleSubmit(event) {
    event.preventDefault();

    fetch('**path**', {
        method: 'POST',
 ** Don't know how to send video file(.mp4) to server  **

}

render() {
    return (
        < div >

            <form onSubmit={this.handleSubmit}>
                <label>
                    Upload a file:
                    <br /><br />
                    <input type="file" name="file" onChange={this.onChangeHandler} />
                </label><br /><br />
                <input type="submit" value="Upload" />
            </form >

        </div >
    );
}
}

请有人帮我。

Answer 1

要上传某些文件，请使用“ react-firebase-file-uploader”软件包。这样，您可以使用Firebase轻松上传一些文件。

包裹：https://www.npmjs.com/package/react-firebase-file-uploader 随机教程：https://www.youtube.com/watch?v=dVh5kvDMPNY

Answer 2

这是我认为应该去的方式

import React from 'react';

export default class Upload extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            selectedFile: null
        };
    }
    onChangeHandler = (event: any) => {
        this.setState({
            selectedFile: event.target.files[0],
            loaded: 0,
        });
        console.log(event.target.files[0]);
    };

    handleSubmit = (event: any) => {
        event.preventDefault();
        const formData = new FormData();
        const { selectedFile } = this.state;
        formData.append('inputFile', selectedFile);
        fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });
    };

    render() {
        return (
            < div >
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Upload a file: <br /><br />
                        <input type="file" name="file" onChange={this.onChangeHandler} />
                    </label>
                    <br /><br />
                    <button type="submit">
                        Upload
                    </button>
                </form >
            </div >
        );
    }
}

话虽如此，后端api可以将文件放在文件目录中。

表达示例

import express from 'express';

const fileupload = require("express-fileupload");
app.use(fileupload());

app.post('/api/upload', (req: any, res) => {
    console.log(req.files);
    // handle the file here
    res.sendStatus(200);
});

在React中使用REST API将视频文件上传（.mp4）到服务器

2 个答案: