将图像文件从 react 发送到 node.js

Question

我目前正在上传个人资料图片并将图片保存在 aws s3 存储桶中。

当我通过 Postman 发送图像文件时，没有错误就可以正常工作。我能够将文件上传到 multer 和 aws s3。

但是，当我尝试通过 react 前端上传图片时，它没有显示任何文件。 req.file 未定义。

我试图解决这个问题好几个星期，但仍然没有任何线索。我试过 data.append profilepic[0] 但还是不行。

反应代码

 clickSubmit = event => {
        event.preventDefault()
        
        const {profilepic, fname, lname, password, passwordconfirm} = this.state
        const data = new FormData();
        console.log(profilepic[0]);
        // data.append('profilepic', profilepic[0], profilepic[0].name);
        const user ={
            fname,
            lname,
            password,
            passwordconfirm,
            profilepic
        };
        console.log(user);
        this.signup(user).then(data => {
            console.log(data)
            if(data.error) {
                this.setState({error: data.error});
            }
            else{
                this.setState({
                    fname:"",
                    lname: "",
                    password: "",
                    error: "",
                    open: true,
                    passwordconfirm: "",
                    // profilepic: [],
                });
            }
                
        });

    };

    onDrop(picture) {
        this.setState({
            profilepic: picture,
        });
        console.log(this.state.profilepic);
    }

    signup = user => {
        return fetch("http://localhost:3003/auth/mtregister",{
            method: "POST",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "http://localhost:3003"

            },
            body: JSON.stringify(user)
        })
        .then(response => {
            return response.json();
          })
          .catch(err => console.log(err));
    }

检查控制台显示文件信息 console from front-end

mtregister node.js

const db = require('../../dbconfig.js');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const {promisify} = require('util');
const nodemailer = require('nodemailer');
const multer = require('multer');
const fs = require('fs');
const aws = require('aws-sdk');

aws.config.update({
    accessKeyId: process.env.AWS_KEY,
    secretAccessKey: process.env.AWS_SECRET_KEY,
    region: 'us-east-1',
});

//Creating a new instance of S3:
const s3= new aws.S3();

// Set up Multer Storage
const storage = multer.diskStorage({
    destination: "../../public/images",
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
    }
  })

const upload = multer({ storage: storage });

/*mentor register*/
exports.mtregister = [upload.single('profilepic'), async(req,res)=>
{
    console.log(req.body);
    console.log(req.file);
....
}

console.log(req.body);console.log(req.file); 的输出为空 [ {} ] 且未定义。 console.log results

Answer 1

我推荐使用 Axios 从 React 发出 http 请求。文档很好。

示例来自：https://www.nicesnippets.com/blog/react-js-file-upload-example-with-axios

import React from 'react'
import axios from 'axios';

class FileUpload extends React.Component{

    constructor(){
        super();
        this.state = {
            selectedFile:'',
        }

        this.handleInputChange = this.handleInputChange.bind(this);
    }

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

    submit(){
        const data = new FormData() 
        data.append('file', this.state.selectedFile)
        console.warn(this.state.selectedFile);
        let url = "http://localhost:8000/upload.php";

        axios.post(url, data, { // receive two parameter endpoint url ,form data 
        })
        .then(res => { // then print response status
            console.warn(res);
        })

    }

    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-md-6 offset-md-3">
                        <br /><br />

                            <h3 className="text-white">React File Upload - Nicesnippets.com</h3>
                            <br />
                            <div className="form-row">
                                <div className="form-group col-md-6">
                                    <label className="text-white">Select File :</label>
                                    <input type="file" className="form-control" name="upload_file" onChange={this.handleInputChange} />
                                </div>
                            </div>

                            <div className="form-row">
                                <div className="col-md-6">
                                    <button type="submit" className="btn btn-dark" onClick={()=>this.submit()}>Save</button>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        )  
    }
}

export default FileUpload;