загрузить файл изображения из реакции на nodejs

Question

Это код реакции

import React, { Component } from "react";
import Webcam from "react-webcam";
import * as faceapi from "face-api.js";
import { browserHistory } from "react-router";
import axios from "axios";



export default class WebCamPicure extends Component {
    constructor() {
        super();
        this.state = {

            selectedFile: null
        };
    fileSelectedHandler = (event) => {
        console.log(event.target.files[0]);
        this.setState({
            selectedFile: event.target.files[0]
        });
    };
    fileUploadHandler = () => {
        const fd = new FormData();
        fd.append("image", this.state.selectedFile, this.state.selectedFile.name);
        fetch("http://localhost:5000/upload", {
            method: "POST",
            headers: { "Content-Type": "multipart/form-data" },
            mode: "no-cors",
            body: fd
        });

    };

    render() {
        return (
            <div
                className="App"
                style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center"
                }}
            >

                <div class="upload">
                    <input type="file" onChange={this.fileSelectedHandler} />
                    <button onClick={this.fileUploadHandler}>upload</button>
                </div>
            </div>
        );
    }
}

Это код узла сервера

const express = require("express");
var mysql = require("mysql");
const axios = require("axios");
var connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "expression_detection"
});
connection.connect((err) => {
    if (!!err) {
        console.log("error");
    } else {
        console.log("connected");
    }
});
const app = express();

app.get("/api/customers", (req, res) => {
    const customer = [
        { id: 1, firstname: "jhon", lastname: "doe" },
        { id: 2, firstname: "praveen", lastname: "smith" },
        { id: 3, firstname: "kumar", lastname: "swason" }
    ];
    res.json(customer);
});


app.get("/", (req, res) => {
    connection.query("SELECT * FROM individual_result", (error, row, fields) => {
        if (!!error) {
            console.log("Error in the query");
        } else {
            console.log("seccessful query");
            console.log(row);
        }
    });
    res.json("hello");
});


app.post("/upload", (req, file, res) => {
    console.log("got it");
    console.log(req);
    // console.log(res);
});

const port = 5000;
app.listen(port, () => {
    console.log("server started on port " + port);
});

Я пытаюсь загрузить изображение на сервер nodejs, но не могу получить ie загрузить файл на сервер. Я загрузил мой код выше, пожалуйста, помогите мне решить эту проблему. Теперь мне нужно получить загруженный файл на сервере и сохранить в базе данных

Я пытаюсь загрузить изображение на сервер nodejs, но я не могу получить ie файл загрузки на сервер. Я загрузил мой код выше, пожалуйста, помогите мне решить эту проблему. Теперь мне нужно получить загруженный файл на сервере и сохранить в базе данных

Answer 1

Вам потребуется настроить выделенный обработчик для работы с multipart / form-data . Вы можете использовать multer .

Multer - это промежуточное ПО node.js для обработки multipart / form-data, которое в основном используется для загрузки файлов.