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

Question

这是我的问题。

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

我将首先运行“创建用户”方法，如果一切正常，则上传图像。

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

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

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

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

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