首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >NG2中的进度条-文件-在角6上传

NG2中的进度条-文件-在角6上传
EN

Stack Overflow用户
提问于 2018-08-10 05:06:12
回答 2查看 6.2K关注 0票数 1

我想要为我的文件上传创建一个进度条。

我使用的上传是:https://www.npmjs.com/package/ng2-file-upload.

app.component.html

代码语言:javascript
运行
复制
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <input type="file" name="myFile" ng2FileSelect [uploader]="uploader" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                Upload an Image
            </button>
        </div>
    </div>
</div>

app.component.ts

代码语言:javascript
运行
复制
import { Component, ViewChild } from '@angular/core';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload';

const URL = 'url to API';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'myFile' });

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log('ImageUpload:uploaded:', item, status, response);
      alert('File uploaded successfully');
    };
 }
}

一切都很好,但我想放一个进度条,只有这个。

EN

回答 2

Stack Overflow用户

发布于 2018-08-10 05:44:10

你可以听听这里的进展

代码语言:javascript
运行
复制
this.uploader.onProgressItem = (progress: any) => {
    console.log(progress['progress']);
};
票数 4
EN

Stack Overflow用户

发布于 2019-06-25 21:16:33

在您的app.component.html中包括:

代码语言:javascript
运行
复制
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51779303

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档