Angular 4/5 实现七牛云上传

版权声明：本文为博主原创文章，转载需注明出处。 https://blog.csdn.net/jiangshanwe/article/details/81259579

利用Angular的组件式开发，将附件上传功能做成独立的一个模块，在其他功能中可以共用这个组件。
本示例只实现单文件上传功能。

hmtl代码

<div class="col-sm-12 uploadBody">
    <div class="uploadHeader">
        <span>上传文件</span>
    </div>
    <hr class="hr hr-dash"/>
    <div class="uploadContent">
        <div class="file-box">
            <input type="file" class="file-btn" (change)="handleFileInput($event.target.files)"/>选择文件
        </div>
        <input class="showFileName" disabled [value]="fileName" placeholder="请选择文件">
    </div>
    <hr class="hr"/>
    <div class=" ModelButtonGroup">
        <button class="btn defalut-btn" (click)="cancel()">取消</button>
        <button class="btn submit-btn" (click)="confirmUpload()">上传</button>
    </div>
</div>

ts代码

    token: string;
    fileName: string;
    fileToUpload: File = null;

    constructor(private toastr: ToastrService,
                private qiniuService: QiniuService) {
    }
    handleFileInput(files: FileList) {
        this.fileName = files[0].name
        this.fileToUpload = files.item(0);
    }
    cancel () {
        this.dialogRef.close();
    }
    confirmUpload() {
        if (!this.fileToUpload) {
            this.toastr.error('请选择一个文件');
            return false;
        }
        this.qiniuService.postFile(this.fileToUpload, this.token).subscribe(data => {
            console.log(data);
            this.dialogRef.close(data);
        });
    }

service代码

    postFile(fileToUpload: File, token: string): Observable<any> {
        const endpoint = 'http://upload.qiniup.com/';
        const formData = new FormData();
        formData.append('file', fileToUpload);
        formData.append('key', fileToUpload.name);
        formData.append('token', token);
        return this.httpClient.post(endpoint, formData);
    }

参考

使用Angular构建上传
谷歌“Angular 七牛”第一个结果就是这篇官方文档，通俗易懂。百度出来的结果就不吐槽了。