如何使用 multer 将图片上传到本地文件夹？

Question

我是一名学生，我有一个项目来创建一个简单的网站。我正在尝试创建一个网站，用户可以在其中创建某种列表并将图片上传到其中（有点像 ebay），以及创建用户个人资料并将图片上传到其中的能力。但是在过去的一天半里，我一直在为如何上传图片而苦苦挣扎。我是 JS 的初学者，我已经阅读了很多文章和文档，但我无法真正理解它。所以我希望有人能指出我正确的方向。

在 MVC 结构中：

配置/

控制器/

模型/

公开/

查看/列表/

app.js

package.json

---

app.js:

    const express = require('express');
    const config = require('./config/config');
    const app = express();

    let env = 'development';
    require('./config/database')(config[env]);
    require('./config/express')(app, config[env]);
    require('./config/passport')();
    require('./config/routes')(app);

    module.exports = app;

---

views/listing/create.hbs

-- 创建一个新列表（标题、内容、上传图片）

     <!-- ...-->  
    <div>Upload your item's picture:<div>
    <form method="POST" enctype="multipart/form-data">
       <input type="file" name="image">
       <button type="submit" class="btn btn-primary">Submit</button>
    </form>
     <!-- ...-->        

---

config/routes.js

    const listingController = require('./../controllers/listing');
    module.exports = (app) => {
       app.get('/listing/create', listingController.createGet);
       app.post('/listing/create', listingController.createPost);
       // ...
    }     

---

控制器/listing.js

    module.exports = {
     // ...
     createPost: (req, res) => {
     let args = req.body;
     //listing creation logic...
     //.. some checks and database action
       if(err){
        //redirect to home with error message
        } else {           
            // I tried to add the uploading logic here
           res.redirect('/');
        }
     }
   }
  // ...

---

这是我在看了教程和搜索后想出的， 我尝试将它放置在多个位置并尽可能地使用它以及更改路径，但没有任何效果。

    var express = require('express');
    var router = express.Router();
    var multer = require('multer');

    var upload = multer({
         dest: __dirname + "/public/uploads/"
    });

   // I don't really know if this executes completely
    router.post('listing/create', upload.single('image'), function(req, res, next){         
          // These two don't get executed
          res.send(req.file);
          console.log(req.file);
    })

我还尝试创建另一个js文件并将其放置在那里，然后引用它，还尝试将其放置在app.js和routes.js中，均未成功。

我还必须说我也是 HTML 新手。我尝试使用 action="" 属性，并将其匹配到不同的路线，但没有任何效果。我在这里缺少一些严肃的知识，如果有人能帮我解决这个问题，我将不胜感激！ :)

Answer 1

您需要使用 Multer 创建存储并使用 Global Scope 指定控制器上的文件夹：

// var storage = multer.memoryStorage(); // FOR MEMORY STORAGE
var storage =   multer.diskStorage({  // DISK STORAGE
  destination: function (req, file, callback) {
    callback(null, './docs');
  },
  filename: function (req, file, callback) {
    var fileExtensionPatter = /\.([0-9a-z]+)(?=[?#])|(\.)(?:[\w]+)$/;
    var extension = file.originalname.match(fileExtensionPatter)[0];
    if(extension === '.pdf' || extension === '.PDF'){
      callback(null, file.fieldname + '-' + Date.now() + '.pdf');
    } else if (extension === '.txt' || extension === '.TXT'){
      callback(null, file.fieldname + '-' + Date.now() + '.txt');
    } else if (extension === '.docx' || extension === '.DOCX'){
      callback(null, file.filename + '-' + Date.now() + '.docx');
    }
  }
});
var upload = multer({ storage : storage}).single('doc');

然后你需要从接收包含多部分数据的 POST 的函数中调用这个上传函数：

router.post('/upload', ensureAuthenticated, function(req, res) {
  upload(req,res,function(err) {
      if(err) {
          console.log(err);
          return res.end("Error uploading file.");
      }
      // DO YOUR STUFF
});

因此，请记住将 METHOD="POST" 和 ENCTYPE="multipart/form-data" 放在您的表单上，并将名称“doc”（与您在上传函数中定义的名称相同）放在您的 name 参数上：

<form class="form-group" action="/api/v1/quotes/upload" method="post" enctype="multipart/form-data">
    <div id="PDF">
      <label> Drop the PDF file </label>
      <input type="file" name="doc">
    </div>
</form>