AngularJS один файл за раз загрузить

Question

AngularJS один файл за раз загрузить

0

Я работаю над контроллером загрузки файлов 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}
        });

Может ли кто-нибудь сказать мне, как это можно сделать синхронно?

nobody 26 янв. 2016, в 01:03

Источник

0

«Однако, когда я запускаю его с 5 файлами, все они загружаются одновременно, и я не знаю, как изменить его так, чтобы forEach загружал (см. Пример кода) следующий файл после того, как предыдущий файл был загружен». То есть вы хотите, чтобы они загружались «синхронно», а не «асинхронно»?
Xela 25 янв. 2016, в 23:44
0

Ах да, именно! Я буду редактировать это. Спасибо!
nobody 25 янв. 2016, в 23:47

Теги:

javascript

angularjs

file-upload

1 ответ

Ещё вопросы

«Однако, когда я запускаю его с 5 файлами, все они загружаются одновременно, и я не знаю, как изменить его так, чтобы forEach загружал (см. Пример кода) следующий файл после того, как предыдущий файл был загружен». То есть вы хотите, чтобы они загружались «синхронно», а не «асинхронно»?
Ах да, именно! Я буду редактировать это. Спасибо!

Ronaldo Farrapo · Answer 1 · 2018-09-12T17-16-00.000Z

Все, что вам нужно сделать, это создать очередь, которая контролирует запрос на отправку

Шаг 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>