在Node.js中上传图片的问题

时间:2019-05-19 05:32:21

标签: javascript node.js express multipartform-data multer

req.file和req.files不确定。

我尝试使用人们发现有用的方法,但对我没有用。

var upload = multer({dest: './public/files/lost/'});

//INDEX - show all items
router.get("/", function(req, res){
   res.render("items/report");               
});

//CREATE - add new lost to DB
router.post("/", upload.single("image"), function(req, res){
    // get data from form and add to items array
    console.log(req.file);
    console.log(req.files);
    // Other req.body usage here
})

表格

<div class="container">
    <div class="row">
        <h1 style="text-align: center">Report for the Lost Item</h1>
        <div style="width: 30%; margin: 25px auto;">
            <form action="/report" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="type" placeholder="request type">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="date" placeholder="date">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="time" placeholder="time">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="location" placeholder="location">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="phone" placeholder="phone">
                </div>
                <div class="form-group">
                    <input class="form-control" type="file" name="image" placeholder="image url">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="description" placeholder="description">
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block">Submit!</button>
                </div>
            </form>
            <a href="/report">Go Back</a>
        </div>
    </div>
</div>
<% include ../partials/footerstudent %>

我希望req.file包含上载文件的文件名和其他属性。

1 个答案:

答案 0 :(得分:0)

我发现您正在将表单提交到 report 端点。应该以这种方式食用

router.post("/report", upload.single("image"), function(req, res){
    // get data from form and add to items array
    console.log(req.file);
    console.log(req.files);
    // Other req.body usage here
}) 

但是要在您的应用程序中重新组合上载的文件,您需要解析请求正文(作为多部分表单数据)。

Express 3.x 中,您可以使用express.bodyParser中间件来处理多部分表单,但是从 Express 4.x 开始,没有捆绑到主体的解析器。框架。 假设您正在使用 mutler and Express 4.0

,有很多可用的软件包。

首先通过发送其他参数来确保API正在正确使用