Question

我正在使用ReactJS创建一个简单的sendMail应用程序。问题是我的服务器（ExpressJS）中没有收到req.file。

myForm.js

<form className="content-container mailing-form" encType='multipart/form-data'>
            <h1>Let's see if it works</h1>
            <div>
                <label>Mail: </label>
                <input type="text" value={this.state.email} onChange={this.handleChangeToMail} style={{ width: '50%' }} />
            </div>
            <div>
                <label>Subject: </label>
                <input type="text" value={this.state.subject} onChange={this.handleChangeSubject} style={{ width: '50%' }} />
            </div>
            <div>
                <textarea
                    id="test"
                    name="test-mailing"
                    onChange={this.handleChangeFeedback}
                    placeholder="Post some lorem ipsum here"
                    required
                    value={this.state.feedback}
                    style={{ width: '100%', height: '150px' }}
                />
            </div>
            <div> //Here is my input file
                <label>File: </label>
                <input
                    type="file"
                    onChange={this.handleChangeFile}
                    name="myFile"
                />
                <img src="" id="preview" alt="Image preview..."></img>
            </div>
            <input type="button" value="Submit" onClick={this.handleSubmit} />
        </form>

handleChangeFile

handleChangeFile = e => {
    e.preventDefault();

    let fReader = new FileReader();
    let file = '';

    fReader.readAsDataURL(e.target.files[0]);
    fReader.onloadend = (event) => {
        document.getElementById('preview').src = event.target.result;
        file = event.target.result;
        this.setState(() => ({ file }));
        console.log(this.state.file);
    }

}

处理提交

handleSubmit = e => {
    let formData = new FormData();

    formData.append('name', this.state.name);
    formData.append('email', this.state.email);
    formData.append('feedback', this.state.feedback);
    formData.append('subject', this.state.subject);
    formData.append('file', this.state.file);

    const config = {
        headers: {
            "Content-Type": "multipart/form-data",
            "Accept": "application/json",
            "type": "formData"
        }
    }

    const url = "http://localhost:8081/send";

    axios
        .post(
            url,
            formData,
            config
        )
        .then(res => console.log(res.data))
        .catch(err => console.log('Error: ', err));
}

Server.js

const nodemailer = require('nodemailer'); 
const express = require('express'); 
const bodyParser = require('body-parser'); 
const cors = require('cors'); 
var multer = require('multer');

const app = express(); 
const port = 8081;

app.use(cors()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded()); 
app.use(bodyParser.urlencoded({ extended: true }));

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next(); });

app.get('/', (req, res) => res.send('......!'));


const storage = multer.diskStorage({
    destination: './uploads',
    filename: function (req, file, cb) {
        cb(null, file.fieldname + Date.now());
    } })

const uploads = multer({
    storage: storage 
}).single('myFile');

app.post('/send', uploads, (req, res) => {
    if (req.file) {
        res.send('Uploaded !');
    } else {
        res.send('Fail !!');
    }
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

我一直收到“失败！”在我的表格上留言。

我尝试添加任何我能找到的解决方案。我知道里面可能有些混乱，对此表示抱歉：'）！

Answer 1

1。make your uploads folder as static folder

app.use（express.static（'uploads'））;

2。change your destination like below

 destination : function( req , file , cb ){  
    cb(null,'./uploads');
 },

append your file as myFile in frontend

formData.append（'myFile'，this.state.file）;

Answer 2

我通过以下线程解决了我的问题：Convert Data URI to File then append to FormData

我添加了一个将文件从怪异的base64字符串转换为Blob类型的函数，然后再将其发送到服务器。然后我的服务器可以收到req.file！

服务器使用带有multer中间件的axios post发送文件时，服务器响应“未定义”

2 个答案: