有没有办法使用生成的预签名 URL 通过浏览器进行分段上传?
最佳答案
Angular - 多部分 Aws 预签名 URL
例子
https://multipart-aws-presigned.stackblitz.io/
https://stackblitz.com/edit/multipart-aws-presigned?file=src/app/app.component.html
下载后端: https://www.dropbox.com/s/9tm8w3ujaqbo017/serverless-multipart-aws-presigned.tar.gz?dl=0
要使用预签名的 url 将大文件上传到 S3 存储桶,必须使用分段上传,基本上将文件分成许多部分,以允许并行上传。
这里我们将留下一个后端和前端的基本示例。
后端(Serveless Typescript)
const AWSData = {
accessKeyId: 'Access Key',
secretAccessKey: 'Secret Access Key'
};
有3个端点
端点 1:/start-upload要求 S3 开始分段上传,答案是与将要上传的每个部分关联的 UploadId。
export const start: APIGatewayProxyHandler = async (event, _context) => {
const params = {
Bucket: event.queryStringParameters.bucket, /* Bucket name */
Key: event.queryStringParameters.fileName /* File name */
};
const s3 = new AWS.S3(AWSData);
const res = await s3.createMultipartUpload(params).promise()
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
},
body: JSON.stringify({
data: {
uploadId: res.UploadId
}
})
};
}
端点 2:/get-upload-url
为要上传的文件拆分的每个部分创建一个预签名 URL。
export const uploadUrl: APIGatewayProxyHandler = async (event, _context) => {
let params = {
Bucket: event.queryStringParameters.bucket, /* Bucket name */
Key: event.queryStringParameters.fileName, /* File name */
PartNumber: event.queryStringParameters.partNumber, /* Part to create pre-signed url */
UploadId: event.queryStringParameters.uploadId /* UploadId from Endpoint 1 response */
};
const s3 = new AWS.S3(AWSData);
const res = await s3.getSignedUrl('uploadPart', params)
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
},
body: JSON.stringify(res)
};
}
端点 3:/complete-upload
上传文件的所有部分后,有必要通知它们已经上传,这将使对象在 S3 中正确组装。
export const completeUpload: APIGatewayProxyHandler = async (event, _context) => {
// Parse the post body
const bodyData = JSON.parse(event.body);
const s3 = new AWS.S3(AWSData);
const params: any = {
Bucket: bodyData.bucket, /* Bucket name */
Key: bodyData.fileName, /* File name */
MultipartUpload: {
Parts: bodyData.parts /* Parts uploaded */
},
UploadId: bodyData.uploadId /* UploadId from Endpoint 1 response */
}
const data = await s3.completeMultipartUpload(params).promise()
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': true,
// 'Access-Control-Allow-Methods': 'OPTIONS,POST',
// 'Access-Control-Allow-Headers': 'Content-Type',
},
body: JSON.stringify(data)
};
}
前端( Angular 9)
文件被分成10MB的部分
有了文件,请求分片上传到Endpoint 1
使用 UploadId,您可以将文件分成几个 10MB 的部分,并且您可以从每个部分获得使用端点 2 的预签名 url 上传
PUT 是将部分转换为 blob 到端点 2 中获得的预签名 url
当你完成每个部分的上传后,你最后一次请求端点 3
在所有这些示例中,函数 uploadMultipartFile
关于javascript - AWS SDK 预签名 URL + 分段上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31799982/