javascript - Dropzone Js csrftoken

Question

我有一个带有表单元素的 django 模板，其中包括一些输入文本编辑和一个提交按钮以及一个带有 DropzoneJS 的用户头像 uploader 。问题是我无法将 DropzonJs 放入表单的 div 中，因为它会引发 csrf_token 错误。当我在 div 中为 dropzoneJS; 放置一个 csrf_token 时，没有任何变化。我发现 csrf_token 仅适用于 HTML 表单元素。这是我的模板:

<form role="form" method="POST">
    {% csrf_token %}
    <h5>Edit Profile Details</h5>
    <div class="content">
        <h1>{{ username }}</h1>
        <!-- My other fields here -->
        <div class="m-b-sm">
             <img alt="image" class="img-circle" src="{% static 'img/profile.jpg' %}" />
        </div>
        <!-- Here is the div that contains DropzoneJS -->
        <div class="dropzone dropzone-previews" id="my-awesome-dropzone" action="">
            {% csrf_token %}
        </div>
    </div>
    <!-- ... -->

我的想法是，如果我在我的表单中放置一个 {% csrf_token %}，就没有必要在它的表单中添加一些其他的 {% csrf_token %}内部元素。

DropzoneJS 使用这样的表单:

<form class="dropzone" action="{% url "test_avatar" %}" method="post" enctype="multipart/form-data" id="my-awesome-dropzone">
   {% csrf_token %}
</form>

但由于嵌套 HTML 表单元素的错误，我无法在我的表单中使用此表单。我该怎么办？

Answer 1

您应该以编程方式创建您的 dropzone 实例并将 csrf_token 附加到 formData 对象。

首先，将 token 存储在 html 某处的 javascript 变量中:

(我自己使用 PHP/Laravel，所以我不确定这是否打印出 token ，但你明白了..)

<script>
   token = {% csrf_token %};
</script>

然后在您的 javascript 文件(或内联)中创建 dropzone 实例:

var myDropzone = new Dropzone(".dropzone", {
   url: '/file/upload', // your test_avatar route here
   sending: function(file, xhr, formData) {
      formData.append("csrf_token", token);
      // the first parameter should be the fieldname that django is looking for
      // the second parameter being the token from the variable set in your html
   },
});