这是我的问题。
我目前正在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/