上传图像MEAN堆栈

时间:2015-01-16 13:49:19

标签: javascript angularjs mongodb express mean

我意识到网上有很多关于此的资源,但似乎都没有使用我喜欢的方法。

目前,我有一个包含大量输入的表单,当单击“提交”按钮时,该表单将被发送到服务器。这都是使用普通的AngularJS控制器/服务通过json请求发送的,最终由我的ExpressJS路由器处理,以将其存储在MongoDB中。

我想添加一个输入来选择要上传的图像文件。我在网上找到的所有内容似乎都是以用户选择文件后立即复制到服务器的方式进行的。不是我想要的。当点击“提交”按钮时,有没有人知道我是否可以以某种方式上传文件?如果是这样,我在哪里可以找到相关信息?

由于

1 个答案:

答案 0 :(得分:0)

看看这个npm包:https://www.npmjs.com/package/express-fileupload

我选择将文件保存在文件系统上,但您可以轻松更改它以将其存储在mongo中

路由器

router.post(‘/foo’, function (req, res, next) {
 if (!req.files){
    res.redirect(‘/foo’);
 }
 let file = req.files.file;
 let fileName = req.files.file.name;
 if(sys.isJSFile(fileName)){
    //save to filesystem or mongodb
    let filePath = path.join(‘./images’, fileName);
    // Use the mv() method to place the file somewhere on your server
    file.mv(filePath, function(err) {
 if (err){
        logger.error("Could not upload file: " + err);
        res.redirect(‘/foo’);
    } else {
        res.redirect(‘/bar’);
    }
  }
});

视图

 <form class="form-horizontal" action=“/foo” method="post" encType="multipart/form-data">
     <div class="form-group">
         <input class="form-control" type="file" name="file" />
     </div>
     <div class="form-group">
         <input class="form-control" type="submit" value="Submit"/>
     </div>
 </form>