Question

这是我的问题。

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

我将首先运行“创建用户”方法，然后，如果可以，请上传图像。

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

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

在一个完美的世界中，我将能够将新的id传递到processQueue(newUserId)之类的'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'事件发送参数

1 个答案: