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;

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

1 个答案: