Dropzone.js 不会在队列中发布文件，仅使用 JavaScript 发布格式不正确的文件

问题描述 投票：0回答：1

我有一个 Django 项目，它使用 Dropzone 将多个文件上传到用户创建的项目。所有这些都在同一个实例中（项目是与文件上传一起创建的），因此我使用 

autoProcessQueue: false
并在添加其余表单数据后运行 
dropzone.processQueue()
。

我有一个格式错误的 JavaScript 文件，但最终可以正常工作。文件已发布，我可以通过 

<MultiValueDict: {'file': [<InMemoryUploadedFile: <img_name>.jpg (image/jpeg)>]}>
访问它们。这“有效”，但我无法上传多个文件。

我格式正确的 JavaScript 没有返回任何内容。当我将文件放入 html 中的 dropzone 空间时，会显示预览，但现在文件已加载。当我 

POST
表单时，我在 dropzone 的输出中得到以下内容：
<MultiValueDict:[]

为什么我的坏JS只能部分运行，但我正确的JS却没有捕获任何文件上传？

不好，但可以在 dropzone 中为 1 个文件使用 javascript.js 

dropzonePreviewNode && (dropzonePreviewNode.id = "", previewTemplate = dropzonePreviewNode.parentNode.innerHTML, dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode), dropzone = new Dropzone(".dropzone", {
    headers: {
        'X-CSRFToken': csrftoken
    },
    autoProcessQueue: false,
    url: "create",
    method: "post",
    uploadMultiple: true,
    previewTemplate: previewTemplate,
    previewsContainer: "#dropzone-preview",
    acceptedFiles:'.jpg',
})
dropzone.on('success', dropzone.processQueue.bind(dropzone));

正确的 JS，但不起作用 - 原因 

Broken Pipe
：

dropzonePreviewNode && (dropzonePreviewNode.id = "", previewTemplate = dropzonePreviewNode.parentNode.innerHTML, dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode), dropzone = new Dropzone(".dropzone", {
    headers: {
        'X-CSRFToken': csrftoken
    },
    autoProcessQueue: false,
    url: "create",
    method: "post",
    uploadMultiple: true,
    previewTemplate: previewTemplate,
    previewsContainer: "#dropzone-preview",
    acceptedFiles:'.jpg',
}));
dropzone.on('success', dropzone.processQueue.bind(dropzone));

html:

<form action="{% url 'apps:projects.create'%}" method="POST" enctype="multipart/form-data" class="dropzone">
        {% csrf_token %}
        {{ form.media }}
        {{ form.as_p }}
        ... (other form data input for project model) ...
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">Attached files</h5>
        </div>
        <div class="card-body">
            <div>
                <p class="text-muted">Add Attached files here.</p>

                <div class="dropzone">
                    <div id="create-project" class="fallback">
                        <input name="file" type="file" multiple="multiple">
                    </div>
                    <div class="dz-message needsclick">
                        <div class="mb-3">
                            <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                        </div>

                        <h5>Drop files here or click to upload.</h5>
                    </div>
                </div>

                <ul class="list-unstyled mb-0" id="dropzone-preview">
                    <li class="mt-2" id="dropzone-preview-list">
                        <!-- This is used as the file preview template -->
                        <div class="border rounded">
                            <div class="d-flex p-2">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-sm bg-light rounded">
                                        <img src="#" alt="Project-Image" data-dz-thumbnail class="img-fluid rounded d-block" />
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="pt-1">
                                        <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                        <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                        <strong class="error text-danger" data-dz-errormessage></strong>
                                    </div>
                                </div>
                                <div class="flex-shrink-0 ms-3">
                                    <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- end dropzon-preview -->
            </div>
        </div>
    </div>
    <!-- end card -->
    <div class="text-end mb-4">
        <button type="submit" class="btn btn-danger w-sm" onclick="location.href = '{% url 'apps:projects.list' %}';">Cancel</button>                                    
        <button type="submit" class="btn btn-success w-sm" id="add-btn">Create</button>
    </div>
</div>
</form>

view.py（很简单，我现在只想打印

request.FILES
，看看dropzone是否正常工作。轻松保存到正确的位置）

def apps_projects_create_view(request):
    if request.method == "POST":
        form = ProjectListAddForm(request.POST, request.FILES or None)
        if form.is_valid():
                form.save()
                print(form.cleaned_data)
                print(request.FILES)

模型.py

class ProjectList(models.Model):
    identifier = models.AutoField(primary_key=True) 
    logo = models.ImageField(upload_to=project_directory_path, blank=True, null=True)
    name = models.CharField(max_length=50)
    client = models.ForeignKey('ClientCompany', blank=True, null=True, on_delete=models.CASCADE)   
    description = RichTextField(default="Please add Project description... ", blank=True)
    create_date = models.DateField(auto_now_add=True)
    end_date = models.DateField(blank=True, null=True)
    due_date = models.DateField(blank=True, null=True)
    assignment = models.ManyToManyField(TechnicianUser)        
    status = models.CharField(max_length=50,choices=PROJECT_STATUS)
    priority = models.CharField(max_length=10,choices=PRIORITY, null=True, blank=True)
    file = models.FileField(upload_to=project_directory_path, blank=True, null=True)
    tag = TaggableManager(blank=True)
javascript python django dropzone.js
1个回答
0
投票
@jmur 的

这个 StackOverflow 答案 解决了我的问题：

<script>
    Dropzone.autoDiscover = false;
    new Dropzone("#create-post",{
      clickable: ".dropzone",
      url: "{% url 'create_post' request.user.slug %}",
      previewsContainer: "#previewsContainer",
      paramName: "images",
      maxFiles: 10,
      maxFilesize: 30,
      acceptedFiles: '.png, .jpg, .jpeg',
      uploadMultiple: true,
      parallelUploads: 20,
      autoProcessQueue: false,
      init() {
        var myDropzone = this;
        this.element.querySelector("#submit-all").addEventListener("click", function(e){
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        });
        this.on("success", function(file, response) {
            window.location.href=JSON.parse(file.xhr.response).url
        });
      }
    });
</script>

这是我的脚本中需要更改/包含的内容

init() {
        var myDropzone = this;
        this.element.querySelector("#submit-all").addEventListener("click", function(e){
          e.preventDefault();
          e.stopPropagation();
          myDropzone.processQueue();
        });
        this.on("success", function(file, response) {
            window.location.href=JSON.parse(file.xhr.response).url
        });
      }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.