Angular 2+ HTTP POST和GDrive API。与名字
问题描述:
我试图在角2到目前为止我能上传文件文件上传到谷歌驱动器,但没有title
,他们是“无题”Angular 2+ HTTP POST和GDrive API。与名字
这里可恢复的文件上传代码做到这一点:
gDriveUploader(file): Promise<any> {
let authToken = tokenHere;
const url = `https://www.googleapis.com/upload/drive/v2/files/`
let formData:FormData = new FormData();
formData.append('title', file, file.name);
let headers = new Headers({
'Authorization': 'Bearer ' + authToken
});
headers.append('Accept', file.type);
let options = new RequestOptions ({
headers: headers,
});
console.log('OPTIONS: ', options)
return this.http.post(`${url}`, formData, options)
.toPromise()
.then(response => response.json())
.catch(e=>console.log(e));
}
我知道,为了与发送文件的元数据,我有这个元数据添加到Request
身体和multipart
或resumable
上传类型使用。但是在这里,我遇到了问题,只是无法正确处理。
我完全搞砸了。这里是我的方法与resumable
上传类型:
gDriveUploader(file): Promise<any> {
let authToken = token;
const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
console.log('FILE TO UPLOAD: ', file)
let formData:FormData = new FormData();
formData.append('name', file, file.name);
let headers = new Headers({
'Authorization': 'Bearer ' + authToken,
'Content-Type': 'application/json; charset=UTF-8', //if remove "Bad Content" Error
//'Content-Length': file.size, not sure if this one right?
});
let options = new RequestOptions ({
headers: headers,
});
return this.http.post(`${url}`, formData, options)
.toPromise()
.then(response => response.json())
.catch(e=>console.log(e));
}
,不仅是我的两个方法......
根据驱动器API为resumable
上传:
POST https://www.googleapis.com/drive/v3/files?uploadType=resumable
HTTP/1.1
Authorization: Bearer [YOUR_AUTH_TOKEN]
Content-Length: 38
Content-Type: application/json; charset=UTF-8
X-Upload-Content-Type: image/jpeg
X-Upload-Content-Length: 2000000
什么是Content-Length: 38
?它的文件长度,我可以使用file.size
?
With multipart
我无法弄清楚如何在请求中添加这些边界分隔符。
我看到一些Q和A,multipart
不支持Angular,但那是1-2年前。现在呢?
我可以使用标准的Angular功能以不同的方式使用可恢复的上传到GDrive和额外的文件元数据吗?
答
所以。对API的工作原理进行更多的研究。我想出了以下用于可恢复文件上传的解决方案。主要想法,这是我第一次为我的文件发出请求和“设置元数据”,并获得链接的响应,以及在哪里上传文件。并且此链接作为response header
之一被称为location
。
这里是完整的工作代码。只需将File
对象传递给第一个函数即可。
我刚刚为此做了2个功能。首先将设置元数据(只是名称)并调用第二个函数来上传二进制数据。
gDriveUploader(file): Promise<any> {
let authToken = token
const url = `https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable`
let headers = new Headers({
'Authorization': 'Bearer ' + authToken,
'Content-Type': 'application/json; charset=UTF-8',
});
let options = new RequestOptions ({
headers: headers,
});
return this.http.post(`${url}`, {name: file.fullName}, options) //just set the name
.toPromise()
.then(response => this.gDriveUploadFile(file, response.headers.get('location'))) //call second function to upload `file` to proper URI from response
.then(response => {
let id = response.json().id //parse id of uploaded file
let resp = {fileName: file.fullName, fileType: file.fileType, fileSize: file.size, fileId: id} //create an object with file file properties, if you need that
return resp // return object back to function that called this service
})
.catch(e=>console.log(e));
}
二功能上传数据:
gDriveUploadFile(file, url): Promise<any> { //file and url we got from first func
let authToken = token
let headers = new Headers({
'Authorization': 'Bearer ' + authToken,
'Content-Type': 'application/json; charset=UTF-8',
'X-Upload-Content-Type': file.type
});
let options = new RequestOptions ({
headers: headers,
});
return this.http.post(`${url}`, file, options) //call proper resumable upload endpoint and pass just file as body
.toPromise()
}
可能的解决方案并不理想,到目前为止,我在这里不处理错误和不按块使用resumable
功能,如上传,只需上传文件一次。但希望如果其他人坚持使用GDrive上传可以得到一个想法。