javascript - Dropzone Js csrftoken

我有一个django模板，其中有一个form元素，其中包括一些输入文本编辑和一个submit按钮，还有一个带有DropzoneJS的用户avatar uploader。
问题是我不能把DropzonJs放在表单的div中，因为它会引发csrf_token error。当我把一个csrf_token放在我的div中时，没有任何变化。我发现dropzoneJS;只适用于csrf_token表单元素。
这是我的模板：

<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>
    <!-- ... -->

但我认为，如果我在表单中添加一个HTML，就不需要在其内部元素中添加其他{% csrf_token %}。
DropzoneJS使用的表单如下：

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

但由于嵌套{% csrf_token %}表单元素的错误，我无法在表单内使用此表单。
我该怎么办？

最佳答案

您应该以编程方式创建dropzone实例，并将csrf_令牌附加到formData对象。
首先，将令牌存储在html中的javascript变量中：
（我自己使用PHP/Laravel，所以我不确定这是否会打印出令牌，但您可以得到这个想法….）

<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
   },
});