Question

我创建了一个快速上传页面，但是对于大型媒体文件存在一些问题。

15mb以下的图片和视频上传很好，但是任何更大的图片和视频都会因404错误而失败。

Dev Lang：JS HTML JQ
Dev Envir：node@6.10.3，express @ 4.15.3，body-parser @ 1.17.2，formidable@1.1.1

以下是我在上传表单上的Ajax请求，可以看到 here！

   $('.upload-btn').on('click', function () {
      var opt_beats = document.getElementById("opt_beats").checked;
      var opt_rivers = document.getElementById("opt_rivers").checked;

    if (opt_beats == true) {

        $('#upload-input').click();
        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');

        $('#upload-input').on('change', function () {

            var files = $(this).get(0).files;

            if (files.length > 0) {
                // create a FormData object which will be sent as the data payload in the
                // AJAX request
                var formData = new FormData();

                // loop through all the selected files and add them to the formData object
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];

                    // add the files to formData object for the data payload
                    formData.append('uploads[]', file, file.name);
                }

                $.ajax({
                    url: '/api/uploader/beats',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log('upload successful!\n' + data);
                    },
                    xhr: function () {
                        // create an XMLHttpRequest
                        var xhr = new XMLHttpRequest();

                        // listen to the 'progress' event
                        xhr.upload.addEventListener('progress', function (evt) {

                            if (evt.lengthComputable) {
                                // calculate the percentage of upload completed
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete *
                                    100);

                                // update the Bootstrap progress bar with the new percentage
                                $('.progress-bar').text(percentComplete + '%');
                                $('.progress-bar').width(percentComplete + '%');

                                // once the upload reaches 100%, set the progress bar text to done
                                if (percentComplete === 100) {
                                    $('.progress-bar').html('Done');
                                }

                            }

                        }, false);

                        return xhr;
                    }
                });

            }
        });
    } else if (opt_rivers == true) {

        $('#upload-input').click();
        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');
        $('#upload-input').on('change', function () {

            var files = $(this).get(0).files;

            if (files.length > 0) {
                // create a FormData object which will be sent as the data payload in the
                // AJAX request
                var formData = new FormData();

                // loop through all the selected files and add them to the formData object
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];

                    // add the files to formData object for the data payload
                    formData.append('uploads[]', file, file.name);
                }

                $.ajax({
                    url: '/api/uploader/rivers',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log('upload successful!\n' + data);
                    },
                    xhr: function () {
                        // create an XMLHttpRequest
                        var xhr = new XMLHttpRequest();

                        // listen to the 'progress' event
                        xhr.upload.addEventListener('progress', function (evt) {

                            if (evt.lengthComputable) {
                                // calculate the percentage of upload completed
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete *
                                    100);

                                // update the Bootstrap progress bar with the new percentage
                                $('.progress-bar').text(percentComplete + '%');
                                $('.progress-bar').width(percentComplete + '%');

                                // once the upload reaches 100%, set the progress bar text to done
                                if (percentComplete === 100) {
                                    $('.progress-bar').html('Done');
                                }

                            }

                        }, false);

                        return xhr;
                    }
                });

            }
        })
    }
});

这一切都达到了API终点，您可以在下面看到：

    var express = require('express');
    var router = express.Router();
    var path = require('path');
    var formidable = require('formidable');
    var fs = require('fs-extra');

router.post('/beats', function(req, res){

  // create an incoming form object
  var form = new formidable.IncomingForm();

  // specify that we want to allow the user to upload multiple files in a single request
  form.multiples = true;

  // store all uploads in the /uploads directory
  form.uploadDir = path.join(__dirname, '../../public/img/beats');


  // every time a file has been uploaded successfully,
  // rename it to it's orignal name
  form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));

  });

  // log any errors that occur
  form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
  });

  // once all the files have been uploaded, send a response to the client
  form.on('end', function() {
    res.end('Upload End');

  });

  // parse the incoming request containing the form data
  form.parse(req);

});



router.post('/rivers', function(req, res){

    // create an incoming form object
    var form = new formidable.IncomingForm();

    // specify that we want to allow the user to upload multiple files in a             single request
    form.multiples = true;

    // store all uploads in the /uploads directory
    form.uploadDir = path.join(__dirname, '../../public/img/rivers');

    // every time a file has been uploaded successfully,
    // rename it to it's orignal name
    form.on('file', function(field, file) {
      fs.rename(file.path, path.join(form.uploadDir, file.name));
    });

    // log any errors that occur
    form.on('error', function(err) {
      console.log('An error has occured: \n' + err);
    });

// once all the files have been uploaded, send a response to the client
form.on('end', function() {
  res.end('success');
});

// parse the incoming request containing the form data
form.parse(req);

  });

module.exports = router;

Chrome Dev工具的屏幕截图，在小视频文件上记录成功，但在大型视频文件上失败。

我玩过ajax请求中的内容类型无济于事。我希望它看起来很简单，你有足够的信息来发现它

以下是请求的expressjs日志：

[2017-10-06T11:54:56.813Z] Warp speed, Mr Sulu on Port: 3000
[2017-10-06T11:54:56.815Z] CAUTION: You are running this in PRODUCTION mode!!!!
  express:router dispatching OPTIONS /api/uploader/beats +9s
  express:router query  : /api/uploader/beats +4ms
  express:router expressInit  : /api/uploader/beats +3ms
  express:router serveStatic  : /api/uploader/beats +3ms
  express:router jsonParser  : /api/uploader/beats +3ms
  express:router urlencodedParser  : /api/uploader/beats +3ms
  express:router <anonymous>  : /api/uploader/beats +3ms
  express:router <anonymous>  : /api/uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +1ms
  express:router dispatching OPTIONS /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +2ms
  express:router dispatching OPTIONS /uploader/beats +2ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching OPTIONS /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +4ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching OPTIONS /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching OPTIONS /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +4ms
  express:router router /api : /api/uploader/beats +2ms
  express:router dispatching OPTIONS /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching OPTIONS /uploader/beats +3ms
  express:router trim prefix (/api/uploader) from url /api/uploader/beats +4ms
  express:router router /api/uploader : /api/uploader/beats +3ms
  express:router dispatching OPTIONS /beats +4ms
  express:router dispatching POST /api/uploader/beats +10ms
  express:router query  : /api/uploader/beats +2ms
  express:router expressInit  : /api/uploader/beats +1ms
  express:router serveStatic  : /api/uploader/beats +2ms
  express:router jsonParser  : /api/uploader/beats +2ms
  express:router urlencodedParser  : /api/uploader/beats +3ms
  express:router <anonymous>  : /api/uploader/beats +2ms
  express:router <anonymous>  : /api/uploader/beats +1ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +0ms
  express:router dispatching POST /uploader/beats +1ms
  express:router trim prefix (/api) from url /api/uploader/beats +1ms
  express:router router /api : /api/uploader/beats +1ms
  express:router dispatching POST /uploader/beats +0ms
  express:router trim prefix (/api) from url /api/uploader/beats +2ms
  express:router router /api : /api/uploader/beats +2ms
  express:router dispatching POST /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +2ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +2ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +2ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +3ms
  express:router trim prefix (/api/uploader) from url /api/uploader/beats +2ms
  express:router router /api/uploader : /api/uploader/beats +3ms
  express:router dispatching POST /beats +2ms
[2017-10-06T11:57:05.828Z] An error has occured:
Error: Request aborted
  express:router dispatching POST /api/uploader/beats +2m
  express:router query  : /api/uploader/beats +3ms
  express:router expressInit  : /api/uploader/beats +4ms
  express:router serveStatic  : /api/uploader/beats +3ms
  express:router jsonParser  : /api/uploader/beats +4ms
  express:router urlencodedParser  : /api/uploader/beats +3ms
  express:router <anonymous>  : /api/uploader/beats +4ms
  express:router <anonymous>  : /api/uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +4ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +4ms
  express:router dispatching POST /uploader/beats +3ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +4ms
  express:router dispatching POST /uploader/beats +2ms
  express:router trim prefix (/api) from url /api/uploader/beats +4ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +4ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +4ms
  express:router dispatching POST /uploader/beats +2ms
  express:router trim prefix (/api) from url /api/uploader/beats +3ms
  express:router router /api : /api/uploader/beats +2ms
  express:router dispatching POST /uploader/beats +2ms
  express:router trim prefix (/api) from url /api/uploader/beats +2ms
  express:router router /api : /api/uploader/beats +3ms
  express:router dispatching POST /uploader/beats +2ms
  express:router trim prefix (/api/uploader) from url /api/uploader/beats +3ms
  express:router router /api/uploader : /api/uploader/beats +2ms
  express:router dispatching POST /beats +3ms

谢谢

Answer 1

Express默认情况下限制请求大小，以更改您可以这样做的单个路由的限制：

const bodyParser = require('body-parser');

app.post('/beats', bodyParser.raw({ limit : '20mb', type : '*/*'}), function(req, res) {
...
});

不确定这是错误，因为你没有提及快递方面的任何登录，所以让我知道

Answer 2

默认内容长度约为30MB。将此行添加到web.config文件将解决问题。这将允许40MB。

<security>
   <requestFiltering>
      <requestLimits maxAllowedContentLength="40000000"/>
   </requestFiltering>
</security>

参考链接：https://docs.microsoft.com/en-us/iis/configuration/system.webServer/security/requestFiltering/requestLimits/

大文件上传失败的强大和expressjs

2 个答案: