【问题标题】:upload an image using busboy meanstack undefined使用 busboy meanstack 上传图像 undefined
【发布时间】:2017-03-02 17:06:51
【问题描述】:

我正在尝试制作具有图像上传功能的注册表单,因此我通过帖子和 enctype = "multipart/form-data" 获取 ejs 端的值

<form method="post" action= "/SignUp" enctype="multipart/form-data" >
    <div class="form-group">
        <label for="firstName">First name</label>
        <input type="text" name="firstName" id="firstName" class="form-control" value="<%= locals.firstName || '' %>" required />
    </div>
    <div class="form-group">
        <label for="lastName">Last name</label>
        <input type="text" name="lastName" id="lastName" class="form-control" value="<%= locals.lastName || '' %>" required />
    </div>
    <div class="form-group">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" class="form-control" value="<%= locals.username || '' %>" required />
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" required />
    </div>
    <div class = "from-group">
      <label for = "Image">Image</label>
      <input Content-Type = "multipart/form-data" type ="file" name = "Image" id = "Image" class = "form-control" required/>
    </div
    <br />
    <br />
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Register</button>
        <a href="/login" class="btn btn-link">Cancel</a>
    </div>
</form>

我使用 busboy 从服务器端处理它

  SignUp:function(req,res){
  let reg = new Registrations();
  var busboy = new Busboy({
    headers: req.headers,
    limits: {
      fileSize: 6*1024*1024 //2MB limit
    }
  });
    var stream;
    var fstream;
       busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) {
         if(fieldname == 'firstName')
         reg.firstName = val;
         else if (fieldname == 'lastName')
          reg.lastName = val;
          else if(fieldname == 'username')
          reg.username = val;
          else {
            reg.password = val;
          }


       })
      busboy.on('file', function(fieldname,file, filename,encoding,mimeType){
      stream = __dirname + '/img/' + filename;
      fstream = fs.createWriteStream(__dirname + '/img/' + filename);
      file.pipe(fstream);
      fstream.on('close', function(){
          reg.Image = stream;
        reg.save(function(err,reg){
          if(err){
            res.send(err.message)
            console.log(err);
          }else{
            console.log(reg);
          }
        })
      })
    })
    busboy.on('finish', function() {

    })
    res.render('login');

  }

每次尝试时都会显示此错误
TypeError: Cannot read property 'on' of undefined on the line

req.busboy.on('file', function(fieldname,file, filename,encoding,mimeType)

你能告诉我这是什么问题吗?

【问题讨论】:

  • 现在它不再显示错误但没有收到字段,我无法将它们保存在猫鼬上

标签: javascript node.js express mean-stack busboy


【解决方案1】:

在第一次查看busboy-doc 之后,在我看来,busboy 没有中间件,它正在扩展请求,请参见代码 sn-p:

var busboy = new Busboy({ headers: req.headers });
    busboy.on('file',...

【讨论】:

    【解决方案2】:

    我之前使用 busboy 上传图片,我将与您分享配置以及它是如何完成的。

    1. 导入busboy模块

      var Busboy = require('busboy');

    2. 然后在你的 post 端点内声明 busboy 对象

      var busboy = new Busboy({
        headers: req.headers,
        limits: {
          fileSize: 6*1024*1024 //2MB limit
        }
      });
      
    3. 接下来是 post 端点

      中的其余代码
      busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) {
             //extract intput-field from upload-form
      });
      
      
      busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
            //process each file upload, check for size, mimetype, 
            //store if all checks passed, delete otherwise, move to 
            //next file
      });
      
      
      //finish call back when all files are uploaded
      busboy.on('finish', function() {
          //do cleanup and other related work 
      });
      
      return req.pipe(busboy);
      

    我创建了一个项目要点,我使用 busboy 上传多张图片并进行以下检查

    1. 从上传表单中提取输入字段
    2. 确保文件大小不超过指定的 XMB
    3. 确保 mimetypes 有效
    4. 一旦找到超过 XMB (X.1MB) 的文件,则中止上传并移至下一个文件
    5. 如果文件满足所有检查,则将其存储在本地

    这里是公共要点的链接Upload Multiple Files with Busboy Nodejs ExpressJS

    【讨论】:

    • on('field',...) for 是什么?
    • 这是一个回调,它将提取上传表单的输入字段,基本上是任何非文件类型的字段(即名字、姓氏等)
    • 我根据你的模块调整了我的模块。错误消失了,但它现在甚至没有收到字段(名字等....)。您认为我从 html 方面正确处理它吗?如果你想看看,我编辑了我的问题代码
    • 你能放一些控制台日志看看on字段是否被调用?如果是,则调用它的 fieldname 的值是什么。只要在您的表单中输入字段在文件字段之前,它就应该是可访问的。
    【解决方案3】:

    我改用了 multer,它工作正常

    https://github.com/expressjs/multer

    【讨论】:

      猜你喜欢
      • 2020-02-16
      • 2017-03-09
      • 2015-11-17
      • 2016-05-08
      • 2015-08-08
      • 2017-05-15
      • 1970-01-01
      • 2023-03-05
      • 2020-04-29
      相关资源
      最近更新 更多