应用错误收集

Django Ajax和net :: ERR_CONNECTION_RESET与jquery-file-uploader

时间：2017-12-19 00:34:31

标签： jquery ajax django jquery-file-upload brunch

我正在尝试将jquery-file-uploaded（https://github.com/blueimp/jQuery-File-Upload）集成到django app中。 JS代码的组装是用早午餐完成的。

浏览器中的请求示例

所以代码发送请求，但我总是得到

jquery.js:9570 POST http://localhost:8000/api/v1/upload/documents/ net::ERR_CONNECTION_RESET

然而，django服务器说

127.0.0.1 - - [19/Dec/2017 00:21:18] "GET /backend/dashboard/ HTTP/1.1" 200 -
127.0.0.1 - - [19/Dec/2017 00:21:18] "GET /static/js/backend.js HTTP/1.1" 304 -
127.0.0.1 - - [19/Dec/2017 00:21:18] "GET /static/js/vendor.js HTTP/1.1" 304 -
127.0.0.1 - - [19/Dec/2017 00:21:19] "GET /static/js/vendor.js.map HTTP/1.1" 304 -
127.0.0.1 - - [19/Dec/2017 00:21:19] "GET /static/js/backend.js.map HTTP/1.1" 304 -
127.0.0.1 - - [19/Dec/2017 00:21:22] "POST /api/v1/upload/documents/ HTTP/1.1" 200 -
127.0.0.1 - - [19/Dec/2017 00:23:51] "POST /api/v1/upload/documents/ HTTP/1.1" 200 -

如果我在django POST处理程序中启用IPDB，我可以调试内容，但我总是在浏览器中返回 ERR_CONNECTION_RESET 。

这是我的JS代码

 // used for file upload
//require('blueimp-file-upload/js/vendor/jquery.ui.widget.js');
//require('blueimp-file-upload/js/jquery.iframe-transport.js');
//require('blueimp-file-upload/js/jquery.fileupload.js');
require('blueimp-file-upload');

// prepare the file upload functionality
  $('.js-upload-btn').click(function() {
    $('#fileupload').click();
  });


  $('#fileupload').fileupload({
    //url: '/backend/documents/upload/',
    url: '/api/v1/upload/documents/',
    dataType: 'json',
    //contentType:"application/json",
    sequentialUploads: true,

    beforeSend: function(xhr, data) {
      //debugger;
      xhr.setRequestHeader('X-XSRF-TOKEN', this.form.formParams().csrfmiddlewaretoken);
      xhr.setRequestHeader('X-CSRF-TOKEN', this.form.formParams().csrfmiddlewaretoken);
      xhr.setRequestHeader('X-CSRFToken',  this.form.formParams().csrfmiddlewaretoken);
      xhr.setRequestHeader('x-csrftoken',  this.form.formParams().csrfmiddlewaretoken);
    },
    start: function(e) {
      $('#modal-progress').modal('show');
    },

    stop: function(e) {
      $('#modal-progress').modal('hide');
    },

    progressall: function(e, data) {
      var progress = parseInt(data.loaded / data.total * 100, 10);
      var strProgress = progress + '%';
      $('.progress-bar').css({
        'width': strProgress
      });
      $('.progress-bar').text(strProgress);
    },
    done: function(e, data) {
      if (data.result.is_valid) {
        $('#gallery tbody').prepend(
          '<tr><td><a href="' + data.result.url + '">' + data.result.name + '</a></td></tr>'
        );
      } else {
        alert('shit');
      }
    }
  });

这是我的HTML表单

<div class="line"></div>

<h2 class="hline">Example Form With Progress Bar Uploader</h2>

<div class="row">
  <div class="col-md-6">
    <form name="documents"
           data-toggle="validator"
           class="dropzone"
           role="form"

           method="POST">
      {% csrf_token %}

      <div class="form-group">
        <label for="inputUser"
               class="control-label">User</label><br />
        <select class="selectpicker"
               name="user"
               id="user"
               required>
            <option>Please select a user</option>
            {% for user in users %}
            <option value="{{ user.pk }}">{{ user.username }}</option>
            {% endfor %}}
            </select>
        <div class="help-block with-errors"></div>
      </div>

      <div class="form-group">
        <input id="fileupload"
               type="file"
               name="file"
               style="display: none;"
               multiple />

        <button type="button"
               class="btn btn-primary js-upload-btn">
          <span class="glyphicon glyphicon-cloud-upload"></span> Upload documents
        </button>
        <br /><br />
        <table id="documents-list"
               class="table table-bordered">
          <thead>
            <tr>
              <th>Documents</th>
            </tr>
          </thead>
          <tbody>
            {% for doc in documents %}
            <tr>
              <td>
                <a href="{{ doc.file.url }}">{{ doc.file.name }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>

      </div>

    </form>
  </div>
</div>

<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Uploading...</h4>
        </div>
        <div class="modal-body">
          <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
          </div>
        </div>
      </div>
    </div>
  </div>

早午餐-配置

// -------------------------------------------------------
// Check against what environment we work
// =======================================================
const environment = process.env.NODE_ENV;
const production = environment === 'production';

let jsFkey = 'js/frontend.js';
let jsBkey = 'js/backend.js';
let jsVkey = 'js/vendor.js';
let jsCkey = 'js/common.js';
let cssFkey = 'css/frontend.css';
let cssBkey = 'css/backend.css';
let cssVkey = 'css/vendor.css';

// adjust file names
if (production) {
  jsFkey = 'js/frontend.min.js';
  jsBkey = 'js/backend.min.js';
  jsVkey = 'js/vendor.min.js';
  jsCkey = 'js/common.min.js';
  cssFkey = 'css/frontend.min.css';
  cssBkey = 'css/backend.min.css';
  cssVkey = 'css/vendor.min.css';
}

// -------------------------------------------------------
// Brunch paths
// =======================================================
exports.paths = {
  watched: ['ui'],
  public: '.ui'
};

// -------------------------------------------------------
// Brunch instructions for css and js assembly
// =======================================================
exports.files = {
  javascripts: {
    joinTo: {
      [jsFkey]: /^ui\/frontend/,
      [jsBkey]: /^ui\/backend/,
      [jsCkey]: /^ui\/common/,
      [jsVkey]: /^node_modules/
    }
  },
  stylesheets: {
    joinTo: {
      [cssFkey]: /^ui\/frontend/,
      [cssBkey]: /^ui\/backend/,
      [cssVkey]: /^node_modules/
    }
  }
};

// -------------------------------------------------------
// Make javascript globals available to window interface
// =======================================================
exports.npm = {
  enabled: true,
  globals: {
    jQuery: 'jquery',
    $: 'jquery',
    bootstrap: 'bootstrap',
    selectpicker: 'bootstrap-select',
    datepicker: 'bootstrap-datepicker',
    table: 'bootstrap-table',
    datatables: 'datatables',
  },
  styles: {
    bootstrap: ['dist/css/bootstrap.css'],
    'bootstrap-select': ['dist/css/bootstrap-select.css'],
    'bootstrap-datepicker': ['dist/css/bootstrap-datepicker.css'],
    'bootstrap-table': ['dist/css/bootstrap-table.css', 'dist/extensions/filter-control/bootstrap-table-filter-control.css'],
    'font-awesome': ['css/font-awesome.css'],
    datatables: ['media/css/jquery.dataTables.css'],
  }
};

// -------------------------------------------------------
// Define plugins options
// =======================================================
exports.plugins = {
  babel: {
    presets: ['env', 'airbnb'],
    ignore: [/^ui\/[a-z0-9_\\/]+\/vendor\//, /node_modules/]
  },
  autoReload: {
    enabled: true
  },
  sass: {
    mode: 'native',
    sourceMapEmbed: true
  },
  copycat: {
    fonts: [
      'node_modules/font-awesome/fonts',
      'node_modules/bootstrap/dist/fonts'
    ],
    verbose: false,
    onlyChanged: true
  },
  cleancss: {
    keepSpecialComments: 0,
    removeEmpty: true
  }
};

// -------------------------------------------------------
// To avoid getting empty files
// see: http://brunch.io/docs/troubleshooting
// =======================================================
exports.watcher = {
  awaitWriteFinish: true,
  usePolling: true
};


// -------------------------------------------------------
// Modules configuration
// see: http://brunch.io/docs/config#-modules-
// nameCleaner is used to reduce path to module like
// require('frontend/js/index') => ('index')
// autoRequire is used to get code called automatically
// at the end of merged file
// =======================================================

exports.modules = {
  nameCleaner(path) {
    return path
      .replace(/^ui\/common\/js\//, 'c/')
      .replace(/^ui\/frontend\/apps\//, 'f/')
      .replace(/^ui\/frontend\/common\/js\//, 'fc/')
      .replace(/^ui\/backend\/apps\//, 'b/')
      .replace(/^ui\/backend\/common\/js\//, 'bc/')
      .replace(/\/js\//, '/')
      .replace(/\/\//, '/');
  },
  autoRequire: {
    [jsFkey]: ['fc/index'],
    [jsBkey]: ['bc/index'],
  }
};

// -------------------------------------------------------
// Enable hot module reloading for JS files
// see: https://github.com/brunch/hmr-brunch
// =======================================================
// exports.hot = true;

0 个答案:

没有答案