文件上传但multer代码未执行| Node + multer + express + formdata

Question

我正在使用form、multer、express 和nodejs 将视频文件上传到本地文件夹。

视频文件被上传到本地文件夹 - 每次我通过表单上传它。但是，upload 中的代码只是偶尔执行。 5 次一次。即console.log('33'); 内的app.post 并不总是被打印出来。但是，console.log('1')（post 和 upload 之前的那个）每次都有效。

server.js代码

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = multer.diskStorage({
        destination: function(req, file, cb) {
        var dir = './client/public/video/';
        mkdirp(dir, function(err) {
        if(err) {
            console.error(err);
        }
        cb(null, dir);
    });
    console.log("Upload: saved to " + dir + file.originalname);
    },
        filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

var upload = multer({
    storage: Storage
  }).single("file");


app.post("/api", function(req, res) {
    console.log('1');

    upload(req, res, function(err) {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
  });

 });

var server = app.listen(9000, function () {
  console.log('app listening at 9000');
});

app.js代码

import React, { Component } from "react";

import axios from "axios";

class App extends Component {
    state = {
        file: null
    };

    handleOnChange = e => this.setState({ [e.target.name]: e.target.value });

    handleOnUploadFile = e => this.setState({ file: e.target.files[0] });

    handleOnSubmit = e => {
        e.preventDefault();
        const formData = new FormData();

        formData.append("file", this.state.file);
        
        axios
        .post("http://localhost:9000/api", formData, {
         headers: {
            'accept': 'video/mp4',
    'Accept-Language': `en-US,en;q=0.8`,
    'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
         }  
        })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));
    };

    render() {
        return (
                <form>
                    <input type="file" encType="multipart/form-data"
                    name="file"
                    accept="video/mp4"
                   onChange={this.handleOnUploadFile}/>
                
                    <button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
                        Submit
                    </button>
                </form>
            );
        }
}

export default App;

我是 react/node js 的新手。尝试了很多其他帖子的建议，但找不到解决方案。

Answer 1

尝试添加async 和await。

server.js

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = multer.diskStorage({
        destination: function(req, file, cb) {
        var dir = './client/public/video/';
        mkdirp(dir, function(err) {
        if(err) {
            console.error(err);
        }
        cb(null, dir);
    });
    console.log("Upload: saved to " + dir + file.originalname);
    },
        filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

var upload = multer({
    storage: Storage
  }).single("file");


app.post("/api", function(req, res) {
    console.log('1');

    upload(req, res, function(err) {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
  });

 });

app.get("/", function(req, res) {
  console.log('1');

  return res.status(200).json({});
});

var server = app.listen(9900, function () {
  console.log('app listening at 9900');
});

App.js

import React, { Component } from "react";

import axios from "axios";

class App extends Component {
    state = {
        file: null
    };

    handleOnChange = e => this.setState({ [e.target.name]: e.target.value });

    handleOnUploadFile = e => this.setState({ file: e.target.files[0] });

    handleOnSubmit = async e => {
        e.preventDefault();
        const formData = new FormData();

        formData.append("file", this.state.file);
        
        await axios
        .post("http://localhost:9900/api", formData, {
         headers: {
            'accept': 'video/mp4',
    'Accept-Language': `en-US,en;q=0.8`,
    'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
         }  
        })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));
    };

    render() {
        return (
            <>
                <h1>{"<b>hello</b>".bold()}</h1>
                <form>
                    <input type="file" encType="multipart/form-data"
                    name="file"
                    accept="video/mp4"
                   onChange={this.handleOnUploadFile}/>
                
                    <button type="submit" className="btn btn-danger" onClick={this.handleOnSubmit}>
                        Submit
                    </button>
                </form>
            </>
            );
        }
}

export default App;

Answer 2

尝试为您的上传功能使用承诺：

var Express = require('express');
var multer = require('multer');
var mkdirp = require('mkdirp');
var app = Express();

var cors = require('cors');    
app.use(cors());
    
var Storage = multer.diskStorage({
        destination: function(req, file, cb) {
        var dir = './client/public/video/';
        mkdirp(dir, function(err) {
        if(err) {
            console.error(err);
        }
        cb(null, dir);
    });
    console.log("Upload: saved to " + dir + file.originalname);
    },
        filename: function(req, file, callback) {
        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
    }
});

var upload = multer({
    storage: Storage
  }).single("file");


app.post("/api", function(req, res) {
    console.log('1');
    
    upload(req, res).then((file, err) => {
    console.log('33');
    if (err) {
             return res.end("Something went wrong!");
         }

    return res.status(200).end("File uploaded successfully!.");
    })



 });

var server = app.listen(9000, function () {
  console.log('app listening at 9000');
});

另一个想法是将上传本身包装在一个承诺中：

var Storage = multer.diskStorage({
return new Promise((resolve, reject) => {
    destination: function(req, file, cb) {
            var dir = './client/public/video/';
            mkdirp(dir, function(err) {
            if(err) {
               reject(err)
            }
            cb(null, dir);
        });
        console.log("Upload: saved to " + dir + file.originalname);
        },
            filename: function(req, file, callback) {
            resolve(callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);)
        }
    })
    });