从反应上传图像文件到nodejs答案

【问题标题】：upload image file from react to nodejs从反应上传图像文件到nodejs
【发布时间】：2023-03-24 19:03:01
【问题描述】：

这是反应代码

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 服务器，但我无法在服务器中接收上传文件。我上传了上面的代码，请帮我解决这个问题。现在我需要在服务器中获取上传的文件并存储在数据库中

【问题讨论】：

标签： node.js reactjs image file-upload server

【解决方案1】：

您需要配置一个专用的处理程序来使用 multipart/form-data。你可以使用multer。

Multer 是一个node.js 中间件，用于处理multipart/form-data，主要用于上传文件。

【讨论】：