Question

中指定的“ tus”方法在Angular中实现Upload组件

根据vimeo的工作流程，第一步是“创建视频”并发出POST请求，以获得“上传网址”以在另一个请求中上传视频。

尝试进行第一步时，我收到一条CORS错误消息。

我已经访问了vimeo帐户，并具有允许上传视频的访问令牌。我有tried this solution，但由于相同的CORS错误而失败，并且websemantic's vimeo-upload script从vimeo返回了错误的请求错误。

我目前在Angular服务中尝试从vimeo获取上传链接的代码如下：

上传服务：

import { Observable } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';

export class UploadService {
    private api = 'https://api.vimeo.com/me/videos';
    private accessToken = '{my access token}';

    constructor( private http: HttpClient ) { }

    createVideo( file: File ): Observable<any> {
        const body = {
            name: file.name,
            upload: {
                approach: 'tus',
                size: '' + file.size
            }
        };
        console.log('request upload link for:', body);
        const header: HttpHeaders = new HttpHeaders()
            .set( 'Authorization', 'bearer ' + this.accessToken )
            .set( 'Content-Type', 'application/json' )
            .set( 'Accept', 'application/vnd.vimeo.*+json;version=3.4' );
        return this.http.post( this.api, body, {
            headers: header,
            observe: 'response'
        } );
    }
}

在我的组件中，我只是使用输入type =“ files”中的文件从服务中调用方法createVideo（）

选择文件并调用createVideo之后，我得到以下信息：

该服务的

console.log：

request upload link for:
{
  name: "movie_90.mp4"
  upload: {
    approach: "tus",
    size: "532571"
  }
}

和CORS错误：

Access to XMLHttpRequest at 'https://api.vimeo.com/me/videos' from 
origin 'http://localhost:8080' has been blocked by CORS policy: 
Request header field x-requested-with is not allowed by 
Access-Control-Allow-Headers in preflight response.

编辑：找到了websemantic的vimeo-upload-js的一个分支，该分支可与当前的vimeo API版本一起使用： https://github.com/Mochaka/vimeo-upload-js

在本地测试并可以正常工作，我现在只需要将纯Javascript集成到Angular组件中即可。

从Angular组件将视频上传到Vimeo时，如何使用“ tus”方法修复CORS错误

0 个答案: