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();
}