我正在尝试实现 Uploadcare 进行多图像上传,但对代码结构感到困惑。下面的代码可以工作,但它有两个 .fail
block 和两个 .done
block 。此外,应在将组保存到服务器上之后使用 $.each()
将图像添加到前端,而此代码同时执行两者。
如何改进这段代码?
$('button').on('click', function() {
var myDialog = uploadcare.openDialog(null, {
imagesOnly: true, multiple: true, multipleMin: 1, multipleMax: 7
});
myDialog.fail(function(error, fileInfo) {
alert('Upload fialed');
});
myDialog.done(
groupInstance => {
var groupPromise = groupInstance.promise();
var arrayOfFiles = groupInstance.files();
groupPromise.done(function(fileGroupInfo) {
/* Save group to server using Ajax */
uploadGroup(fileGroupInfo.uuid);
});
groupPromise.fail(function(error, fileGroupInfo) {
alert('Upload failed');
});
$.each(arrayOfFiles, function(i, file) {
file.done(function(fileInfo) {
/* Add image to front-end */
});
});
});
return false;
});
以及AJAX功能:
uploadGroup = function(imgurl) {
$.post('index.php',
{string:imgurl},
function(data) {
if(data.status=='success') {
alert('success');
}
else {
alert('error');
}
},'json');
};
也对 groupInstance =>
表示法感到困惑。
最佳答案
看来 arrayOfFiles 是一个 Promise 数组?
因此,您使用 $.when
等待所有这些完成
由于您已经在使用现代 JavaScript,因此要添加另一个您可能不熟悉的“奇怪”...
,但它会让事情变得更容易
I may have misunderstood what you wanted to wait for
groupInstance => {
var groupPromise = groupInstance.promise();
var arrayOfFiles = groupInstance.files();
groupPromise.done(function(fileGroupInfo) {
/* Save group to server using Ajax */
uploadGroup(fileGroupInfo.uuid);
// move the .each code here
$.each(arrayOfFiles, function(i, file) {
file.done(function(fileInfo) {
/* Add image to front-end */
});
});
/* Probably not what you wanted
$.when(...arrayOfFiles).then((...fileInfos) => {
$.each(fileInfos, function(i, fileInfo) {
// Add image to front-end
});
});
// the above 5 lines in old school JS
$.when.apply(null, arrayOfFiles).then(function() {
var fileInfos = [].slice.call(arguments);
$.each(fileInfos, function(i, fileInfo) {
// Add image to front-end
});
});
*/
});
groupPromise.fail(function(error, fileGroupInfo) {
alert('Upload failed');
});
}
...arayOfFiles
... ...
是 spread syntax ...所以
$.when(...arrayOfFiles)
就像
$.when.apply(null, arrayOfFiles)
和function(...fileInfos)
是Rest Syntax
function(...fileInfos) {
相当于
function() {
fileInfos = [].slice.call(arguments);
}
就像
关于javascript - 如何使用 uploadcare 上传多个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52617952/