Sails.js文件上传 - 在上传实际完成之前销毁req.body和.upload()回调

时间:2015-07-16 10:06:05

标签: javascript node.js sails.js image-uploading skipper

我正在使用Sails构建一个网站,其中一个页面包含一个表单。此表单具有多个文本输入,以及用于上载图像的文件上载输入。来自所有文本输入的信息存储在Postgres数据库中,图像使用sails docs here中描述的.upload()函数上传,并转换为数据uri,然后存储在同一Postgres中数据库并用于在网站上显示图像。

文件输入是页面上倒数第三个输入,我注意到发生了两件事:

1)文件输入后两个输入中的文本未作为req.body的一部分传递给控制器​​,因为表单输入通常是。

2)对于某些图像,数据库中没有存储数据uri。

我创建了一个新的基本风帆应用程序,其中包含一个允许您上传图像的表单,并且此处发生了完全相同的事情。

经过测试,我发现小图像工作正常,而较大的图像则没有。我使用的“小”图像是66kb,而另一个800kb图像产生了与上面提到的相同的效果。

新的风帆应用,在.upload()功能的回调中,res.view是另一个只显示上传图片的页面。使用800kb图像和更大的图像,在页面呈现时,不显示上传的图像,而是显示损坏的图像。在chrome dev控制台中,它给图像链接带来了404错误,但是如果我在图像URL的末尾添加一个查询(即make chrome认为它是一个不同的URL,所以重新加载相同的图像),图像显示正常。由此我猜测在图像实际上传完成之前调用.upload()回调,并且当我重新加载图像时,它已经完成上传。

我可以在请求标题中看到文件输入后的输入被发送,但在控制器中执行console.log(req.body)只会在表单中输出文件输入之前输入的输入。

我正在使用sails v0.11.0,我使用的代码如下:

HTML表单(index.ejs)

<h1>Image Upload Test</h1>

<form method="post" enctype="multipart/form-data" action="/submit">

  <div>
    <input type="text" name="firstInput">
  </div>

  <div>
    <input type="file" name="image">
  </div>

  <div>
    <input type="text" name="imageUploaded" value="false">
  </div>

  <div>
    <input type="hidden" name="test" value="hello!">
  </div>

  <button type="submit">Upload</button>

  <script type="text/javascript">
    $('input:file').change(function() {
      $('input[name=imageUploaded]').val('true')
    });
  </script>

</form>

配置/ routes.js

module.exports.routes = {

  '/': 'ImageController.show',
  '/submit': 'ImageController.create'

控制器(ImageController.js)

module.exports = {
    show: function(req, res) {
        res.view('index.ejs');
    },

    create: function(req, res) {

        var fileName = 'image' + Date.now() + '.jpg';

    req.file('image')
    .upload({saveAs: __dirname + '/../../assets/images/' + fileName}, function(err, uploadedFiles) {
      if (err) return res.serverError(err);

            console.log('file uploaded');
            console.log();
            console.log(req.body);

            res.view('uploadedImage', {fileName: fileName});

    });

    }

};

显示上传图片的页面(uploadedImage.ejs)

<%if (typeof(fileName) !== 'undefined') {%>
  <a href="/">
    <img src="/images/<%=fileName%>" style="width:100%; height:100%;">
  </a>
<%}%>

任何人都可以解释为什么会发生这种情况并帮助我解决这个问题吗?

由于

1 个答案:

答案 0 :(得分:1)

根据sails文件上传文档,所有文本字段必须在文件字段之前上传,否则它们不会传递给操作。 Sails文档File Upload sails