Я работаю над контроллером загрузки файлов AngularJS. В этом случае пользователь должен иметь возможность загружать JPG, содержащий всю информацию EXIF в файл.
Тем не менее, это большие (5mb+) jpg отправки в удаленный API. Чтобы предотвратить сбой сервера с 100+ загрузки файлов (что маловероятно), я хочу, чтобы все загрузки выполнялись синхронно.
Я использую следующую библиотеку ng-upload, в которой эта сценария загружается синхронно: https://jsfiddle.net/danialfarid/2vq88rfs/136/
Тем не менее, когда я запускаю его с 5 файлами, все они загружаются сразу, и я не знаю, как его изменить, чтобы загружать файл forEach (см. Пример кода) после того, как предыдущий файл был загружен.
angular.forEach(files, function(file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {file: file}
});
Может ли кто-нибудь сказать мне, как это можно сделать синхронно?
Все, что вам нужно сделать, это создать очередь, которая контролирует запрос на отправку
Шаг 1: создать переменную для управления выполнением
this.indexFile = undefined;
Шаг 2: зарегистрируйте $ watch, чтобы посмотреть this.indexFile
_attachListener() {
let vm = this;
vm._scope.$watch('vm.indexFile', function (newValue, oldValue) {
if(newValue !== oldValue){
vm._attachFile();
}
});
}
Шаг 3: код для отправки файлов
_attachFile(){
if(this.indexFile < this.files.length){
if (!this.files[this.indexFile].progress) {
this.service.attach(this.files[this.indexFile])
.then()
.catch()
.finally(()=>{
this.files[this.indexFile].progress = 100;
this.indexFile++ ;
});
}else{
this.indexFile++ ;
}
}
}
Шаг 4: запустить переменную для управления выполнением
startIndexFile() {
let vm = this;
vm.indexFile = 0;
}
setp 5: код html для загрузки
<button type="button" ng-click="vm.startIndexFile()"></button>