Sails.js file loading - killing req.body and .upload () callback execution before loading is actually completed

Question

I am building a website using Sails whose page contains a form. This form has several text inputs and a file upload input for the user to upload an image. Information from all text inputs is stored in the Postgres database, and the image is uploaded using the function .upload()described in the sails files here and converted to the data uri, which is then stored in the same Postgres database and used to display the image on the site.

File input is the third last entry on the page, and I noticed that two things happened:

1) The text on the two inputs after the input file was not transferred to the controller as part req.body, since form inputs are usually used.

2) No uri data was stored in the database for some images.

I created a new basic sailing application with a form that allows you to upload an image, and the same thing happens here.

After testing, I found that small images work fine, but large images do not. The “small” image that I used was 66kb, while another 800kb image produced the same effects as mentioned above.

The new sails application in a function callback .upload(), res.viewon another page that simply displays the loaded image. With an image of 800kb and larger images, by the time the page was displayed, a broken image was displayed instead of displaying the loaded image. In the chrome dev console, it gave a 404 error for linking to the image, but if I add the request to the end of the image URL (i.e., make chrome, think that it is a different URL to reload the same image), The image is displayed in order. From this, I guess that the callback .upload()is called before the image actually completes the download, and by the time I reload the image that it has finished, upload.

, , console.log(req.body) , .

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

- , , ?

Answer 1

, , .