这是我的问题。

我目前正在Laravel中构建一个应用程序,并使用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
    }
  });

最佳答案

一种选择是将自定义属性添加到保存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
    }
});

关于javascript - 使用Dropzone'ProcessQueue'事件发送参数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51031413/

10-12 16:08