Angular.io Upload|上传 例子

编写于

这段时间一直在各种 Angular 项目中挣扎,特别是上传让人措手不及。
索性直接编写一篇可以快速上手的实例,直接抄或者仿照都应该可以直接使用。

  • 新建一个服务

    $ng g s UploadService
    
  • 对服务添加依赖

    
    // http angular的标准HTTP服务
    constructor(private http: HttpClient) {}
    
    // 增加上传方法,参数暂时只有 file
    upload(file: File) {
    // 构建合适的数据表单
    const formData = new FormData();
    formData.append('file', file);
    
    // 构建请求体,因为要做上传进度,所以设置了 reportProgress 为真
    const req = new HttpRequest('POST', '/upload/file/path', formData, {
        reportProgress: true
    });
    
    // 上传重试两次,用了 rxjs 的操作
    return this.http.request(req).pipe(retry(2));
    }
    
    
  • 在 Component 增加上传的操作函数

    
    uploadButtonClicked(ev) {
    // 这里走的是模拟方法
    const elm = document.createElement('input');
    elm.type = 'file';
    elm.multiple = false; // 每次仅上传一个文件,所以直接设置为假
    
    // 监听改变
    elm.addEventListener('change', () => {
        if (elm.files.length > 0) {
            const file = elm.files[0];
    
            this.uploadService
                .upload(file)
                .subscribe((event) => {
                    switch (event.type) {
                        case HttpEventType.Sent:
                            console.info(`${file.name} 上传完毕`);
                            break;
    
                        case HttpEventType.UploadProgress:
                            const percentDone = Math.round(100 * event.loaded / event.total);
                            console.info(`${file.name} 上传进度: ${percentDone}%`)
                            break;
    
                        case HttpEventType.Response:
                            console.info(`远程有返回`)
                            break;
    
                        default:
                            this.logger.info(`"${file.name}" 其他状态: ${event.type}`);
                    }
                });
        }
    });
    elm.click();
    }