使用 Dropzone 'ProcessQueue' 事件发送参数

Question

这是我的问题。

我目前正在 Laravel 中构建应用程序并使用 DropZone 来上传用户图片。现在在 'new user' 页面上，我同时拥有用户详细信息和 dropzone 保管箱，并且它们都在单独处理。

我先运行 'create user' 方法，如果没问题，再上传图片。

问题在于 Dropzone 在准备上传时不知道新用户 ID（因为它需要分配给数据库中的正确用户）。

我不知何故需要能够将新用户 ID 传回 dropzone 'processQueue' 方法，以便在图像上传中使用新用户 ID，有人知道这是否可能吗？

在一个完美的世界中，我将能够像 processQueue(newUserId) 一样将新 ID 传递给 'processQueue' 函数并获取它并将其添加到表单数据中以与图像一起发送。

到目前为止，这是我的代码

HTML

<div id="user_profile" class="dropzone dropzone-box">
  <div class="dz-message needsclick">
     <h3>Select Image</h3>
     <hr>
     <p>Click here or drag and drop image</p>
  </div>
</div>

JS

//Bind dropzone to user profile image
var userProfile = new Dropzone('#user_profile',{
    url: '/ajax/userProfileUpload',
    autoProcessQueue:false,
    maxFiles:1,
    addRemoveLinks:true,
    paramName: 'profile_pic', // The name that will be used to transfer the file
    init: function(){
        this.on("maxfilesexceeded", function(file) {
            userProfile.removeFile(file);
        });
        this.on("success", function(file, returnedData, myEvent) {
           console.log(returnedData);
        });     
    },
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
});

发送新用户请求，完成后发送图片

$.ajax({
    type: "POST",
    url: '/users',
    data: postData,
    success: function(data){
        userProfile.processQueue(/* pass user id from here */);
    },
    error: function(data){
        //Didnt work
    }
  });

Answer 1

一个选项可以是将自定义属性添加到保存 id 的 Dropzone 对象，在 ajax 调用成功时设置此属性，然后在发送事件中访问它，相关部分将是：

var userProfile = new Dropzone('#user_profile',{
    ...
    userId: '', // Attribute to hold the user id
    init: function(){

        let thisDropzone = this; // Closure
        ...
        this.on('sending', function(file, xhr, formData){
            formData.append('userId', thisDropzone.userId);
        });
    }
});

ajax 请求：

$.ajax({
    type: "POST",
    url: '/users',
    data: postData,
    success: function(data){
        userProfile.userId = 'yourId'; // set the id
        userProfile.processQueue(); // process queue
    },
    error: function(data){
        //Didnt work
    }
});

使用 Dropzone 'ProcessQueue' 事件发送参数

Sending Parameter with Dropzone 'ProcessQueue' event

javascript

php

laravel

dropzone.js