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;

视图/列表/ 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>
     <!-- ...-->

配置/ 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的新手。我试着玩动作=＆＃34;＆＃34;属性，并将其匹配到不同的路线，但没有任何效果。我在这里缺少一些认真的知识，如果有人能帮我一把，我真的很感激！：）

Answer 1

您需要使用Multer创建存储，并使用全局范围指定控制器上的文件夹：

// 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”，并在您的name参数上输入名称“doc”（您在upload function上定义的名称）：

<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>

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

app.js：

视图/列表/ create.hbs

配置/ routes.js

控制器/ listing.js

1 个答案: