devui框架 上传文件显示进度条
时间: 2023-08-08 15:08:06 浏览: 162
要在DevUI框架中上传文件并显示进度条,可以使用DevUI提供的`d-upload`组件和`d-progress`组件。
首先,在HTML模板中使用`d-upload`组件来实现文件上传:
``` html
<d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)">
<ng-template #tip>
<span class="devui-upload-tip-text">将文件拖到此处,或<em>点击上传</em></span>
</ng-template>
</d-upload>
```
其中,`uploadUrl`是上传文件的URL,`multiple`表示是否允许上传多个文件,`showUploadList`表示是否显示上传列表,`onStart`是上传开始时的回调函数。
接着,在组件的TS文件中,使用`d-progress`组件来实现进度条:
``` typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-file-upload',
template: `
<d-upload [url]="uploadUrl" [multiple]="false" [showUploadList]="false" (onStart)="onStart($event)">
<ng-template #tip>
<span class="devui-upload-tip-text">将文件拖到此处,或<em>点击上传</em></span>
</ng-template>
</d-upload>
<d-progress [percent]="percent" [strokeWidth]="10" [strokeColor]="'#37a2da'"></d-progress>
`
})
export class FileUploadComponent {
uploadUrl = 'http://localhost:3000/api/upload';
percent = 0;
onStart(event) {
const xhr = event.xhr;
xhr.upload.addEventListener('progress', (e) => {
if (e.total > 0) {
this.percent = Math.floor(e.loaded / e.total * 100);
}
}, false);
}
}
```
其中,`percent`表示进度条的百分比,`strokeWidth`和`strokeColor`分别表示进度条的宽度和颜色。在`onStart`回调函数中,监听XHR对象的`progress`事件,根据已上传的字节数计算出上传的进度百分比,更新`percent`变量的值,从而实现进度条的显示。
阅读全文