AngularJS一次上传一个文件

AngularJS one file at a time upload

本文关键字：一个 文件 一次 AngularJS      更新时间：2023-09-26

我正在研究一个AngularJS文件上传控制器。在这种情况下，用户应该能够上传包含文件中所有EXIF信息的JPG。

但是，这些是发送到远程 API 的大 （5mb+） jpg。为了防止服务器因 100+ 文件上传而关闭（这并非不可能），我希望所有上传同步发生。

我正在使用以下 ng-upload lib，它指出此小提琴同步上传：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以观看此内容。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;
}

设置5：用于开始上传的HTML代码

<button type="button" ng-click="vm.startIndexFile()"></button>
相关文章：