javascript - 如何使用uploadcare上传多个文件
问题描述
我正在尝试为多图像上传实现 Uploadcare,但对代码结构感到困惑。下面的代码有效,但它有两个.fail
块和两个.done
块。$.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 是一个承诺数组?
因此,您等待所有这些都完成使用$.when
并且由于您已经在使用现代 javascript,因此要添加另一个您可能不熟悉的“奇怪” ...
,但这会使事情变得更容易
我可能误解了你想等什么
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
......
是传播语法...所以
$.when(...arrayOfFiles)
就好像
$.when.apply(null, arrayOfFiles)
并且function(...fileInfos)
是Rest 语法
function(...fileInfos) {
相当于
function() {
fileInfos = [].slice.call(arguments);
}
就好像
推荐阅读
- apache-kafka - 由于 _schemas 主题,schema-registry 服务无法启动
- python - 如何使用 3 个变量正确构建递归?
- java - 我正在尝试将搜索功能实现到自定义列表视图中。我使用搜索功能的菜单
- typescript - 通过工厂创建键/值对只允许类中的属性和关联的属性类型值
- flutter - 当孩子有 BorderRadius() 时,我如何使用 Dismissible()?
- python - 使用 Dash 和 Plotly 的多个折线图
- vue.js - 如何使用 Vue 添加/删除带有两个按钮的样式
- c++ - 尝试将用户输入传递给字符串(C++)
- angular - Angular http 响应作为错误参数,即使状态为 200
- observable - 你如何遍历 ViewModel 的 Rx 可观察列表并膨胀视图