Angular 4 实现七牛云上传视频操作

首先吐槽一下，七牛云的demo，能更新下版本吗？能照顾一下新技术吗？

Angular 4/5 实现七牛云上传

[上传文件到七牛后返回hash/key/persistentId值， 如何获取文件的url访问地址？]（blog.csdn.net/cen_cs/arti…

上面这么弄了后，基本是无法完成这个功能的，下面我总结一下今天探索的心得。

总体达到了功能需要，不过还有待完善的地方，比如ui显示，比如上传的视频如何做大小限制。

html

//测试用例
            <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 submit-btn" (click)="confirmUpload()">上传</button>
                </div>
            </div>

ts

    handleFileInput(files: FileList) {
        this.fileName = files[0].name
        this.fileToUpload = files.item(0);
    }

    confirmUpload() {
        if (!this.fileToUpload) {
            //this.toastr.error('请选择一个文件');
            return false;
        }
        if(this.fileToUpload.size > 1024*1024*100){
            layer.msg("上传视频不能大于100M");
            return
        }
        this.qiniuService.postFile(this.fileToUpload, this.token).then(data => {
            console.log(data);
            this.videoScr =`https://file.snailpet.cn/`+ data.key
            this.cover =`https://file.snailpet.cn/`+ data.key + `?vframe/jpg/offset/0`
            layer.msg("上传成功");
            //this.dialogRef.close(data);
        });
    }

//必须要这个东西
    getToken():void{
        let sendData={
            shop_id: this.shopId,
        }
        let connect = this._api.getApi({
            apiUrl: XXXXXXX,
            sendData: sendData,
            type: 'post',
        })
        connect.then(res => {
            if (res && res.data ) {
                this.token = res.data;
            }
        })
    }

service

postFile(fileToUpload: File, token: string): Promise<any> {
        const endpoint = 'http://upload.qiniup.com/';
        const formData = new FormData();
        formData.append('file', fileToUpload);
        formData.append('key', fileToUpload.name);
        formData.append('token', token);
        //formData.append('token', '测试token');
        //return this.httpClient.post(endpoint, formData);
        return this._api.getApi({
            apiUrl: endpoint,
            sendData: formData,
            type: 'P'
        });
    }