上传图像 MEAN 堆栈答案

【问题标题】：Uploading image MEAN stack上传图像 MEAN 堆栈
【发布时间】：2017-04-03 04:07:29
【问题描述】：

我知道网上有很多关于此的资源，但似乎没有一个使用我喜欢的方法。

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

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

谢谢

【问题讨论】：

你可以使用 multer 或类似的东西。
小问题和解决方案呈现here

标签： javascript angularjs mongodb express mean

【解决方案1】：

看看这个 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>

【讨论】：