在Angular中使用AWS SDK for JavaScript,可以实现在S3上进行文件上传而无需完整的个人用户认证基础设施。以下是一个示例解决方法:
npm install aws-sdk
aws-config.json
的配置文件,并填入以下内容:{
"accessKeyId": "YOUR_ACCESS_KEY_ID",
"secretAccessKey": "YOUR_SECRET_ACCESS_KEY",
"region": "YOUR_REGION",
"bucketName": "YOUR_BUCKET_NAME"
}
请替换YOUR_ACCESS_KEY_ID,YOUR_SECRET_ACCESS_KEY,YOUR_REGION和YOUR_BUCKET_NAME为您自己的AWS S3凭证和配置信息。
aws.service.ts
的服务文件,并添加以下代码:import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AwsService {
private readonly bucketName: string;
private readonly s3: any;
constructor() {
const awsConfig = require('../../assets/aws-config.json');
this.bucketName = awsConfig.bucketName;
this.s3 = new AWS.S3({
apiVersion: '2006-03-01',
accessKeyId: awsConfig.accessKeyId,
secretAccessKey: awsConfig.secretAccessKey,
region: awsConfig.region
});
}
uploadFile(file: File): Observable {
return new Observable(observer => {
const params = {
Bucket: this.bucketName,
Key: file.name,
Body: file,
ACL: 'public-read'
};
this.s3.upload(params, (err, data) => {
if (err) {
observer.error(err.message);
} else {
observer.next(100);
observer.complete();
}
}).on('httpUploadProgress', progress => {
const uploadedPercentage = Math.round((progress.loaded / progress.total) * 100);
observer.next(uploadedPercentage);
});
});
}
}
AwsService
并使用它来上传文件。例如,在一个名为upload.component.ts
的组件中:import { Component } from '@angular/core';
import { AwsService } from './aws.service';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent {
constructor(private awsService: AwsService) { }
onFileSelected(event: any): void {
const file: File = event.target.files[0];
this.awsService.uploadFile(file).subscribe(
progress => {
console.log(`File upload progress: ${progress}%`);
},
error => {
console.error('File upload failed:', error);
},
() => {
console.log('File upload completed!');
}
);
}
}
upload.component.html
中:
以上代码示例演示了如何在Angular中使用AWS SDK for JavaScript和S3进行文件上传。在上传文件时,代码会根据配置文件中的凭证和配置信息,将文件上传到指定的S3存储桶,并在上传过程中获取上传进度。