Загрузка видеофайла (.mp4) на сервер, используя остальные API в реакции - PullRequest
Новая
       7

Загрузка видеофайла (.mp4) на сервер, используя остальные API в реакции

0 голосов
/ 08 марта 2020

У меня есть кнопка «Загрузить» для загрузки видеофайла .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 >
    );
}
}

Пожалуйста, кто-нибудь, помогите мне.

Ответы [ 2 ]

0 голосов
/ 08 марта 2020

вот как я думаю, что это должно go

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-интерфейс сервера может ожидать файл в каталоге файлов.

express пример 

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);
});
0 голосов
/ 08 марта 2020

Для загрузки некоторых файлов у вас есть пакет «act-firebase-file-uploader ». Благодаря этому вы можете легко загружать некоторые файлы с помощью Firebase.

Пакет: https://www.npmjs.com/package/react-firebase-file-uploader Случайная инструкция: https://www.youtube.com/watch?v=dVh5kvDMPNY

...