node.js - 为什么我可以通过 Postman 将图像上传到我的 S3 存储桶,但不能通过 Node.js?
问题描述
我正在尝试创建一个将图像上传到 S3 的基本页面。我有我的 S3 凭据和方法,用于在 Springboot 的端口 8080 上运行,前端在 Angular 的 4200 端口上运行。我可以在 Postman 中向http://localhost:8080/storage/uploadFile发出 POST 请求它成功地将图像上传到我的 S3 存储桶。但是当我尝试通过 Angular/我的应用程序做同样的事情时,我得到一个 404。这是我的代码:
Angular:
```import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component ({
selector: 'upload-images',
templateUrl: './upload-images.html',
styleUrls: ['./upload-images.css']
})
export class UploadImagesComponent {
selectedFile: File = null;
constructor(private http: HttpClient) {}
onFileSelected(event) {
this.selectedFile = <File>event.target.files[0];
}
onUpload() {
const formData = new FormData();
formData.append('image', this.selectedFile, this.selectedFile.name);
this.http.post('http://localhost:4200/storage/uploadFile', formData)
.subscribe(res => {
console.log(res);
});
}
}```
Springboot:
```package inno.garage.june19.bucket;
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3Client;
import com.amazonaws.services.s3.model.CannedAccessControlList;
import com.amazonaws.services.s3.model.DeleteObjectRequest;
import com.amazonaws.services.s3.model.PutObjectRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.PostConstruct;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
@Service
public class AmazonClient {
private AmazonS3 s3client;
@Value("${amazonProperties.endpointUrl}")
private String endpointUrl;
@Value("${amazonProperties.bucketName}")
private String bucketName;
@Value("${amazonProperties.accessKey}")
private String accessKey;
@Value("${amazonProperties.secretKey}")
private String secretKey;
@PostConstruct
private void initializeAmazon() {
AWSCredentials credentials = new BasicAWSCredentials(this.accessKey, this.secretKey);
this.s3client = new AmazonS3Client(credentials);
}
public String uploadFile(MultipartFile multipartFile) {
String fileUrl = "";
try {
File file = convertMultiPartToFile(multipartFile);
String fileName = generateFileName(multipartFile);
fileUrl = endpointUrl + "/" + bucketName + "/" + fileName;
uploadFileTos3bucket(fileName, file);
file.delete();
} catch (Exception e) {
e.printStackTrace();
}
return fileUrl;
}
private File convertMultiPartToFile(MultipartFile file) throws IOException {
File convFile = new File(file.getOriginalFilename());
FileOutputStream fos = new FileOutputStream(convFile);
fos.write(file.getBytes());
fos.close();
return convFile;
}
private String generateFileName(MultipartFile multiPart) {
return new Date().getTime() + "-" + multiPart.getOriginalFilename().replace(" ", "_");
}
private void uploadFileTos3bucket(String fileName, File file) {
s3client.putObject(new PutObjectRequest(bucketName, fileName, file)
.withCannedAcl(CannedAccessControlList.PublicRead));
}
public String deleteFileFromS3Bucket(String fileUrl) {
String fileName = fileUrl.substring(fileUrl.lastIndexOf("/") + 1);
s3client.deleteObject(new DeleteObjectRequest(bucketName, fileName));
return "Successfully deleted";
}
}
```
Java Controller:
```package inno.garage.june19.bucket;
import inno.garage.june19.bucket.AmazonClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("/storage")
public class BucketController {
private AmazonClient amazonClient;
@Autowired
BucketController(AmazonClient amazonClient) {
this.amazonClient = amazonClient;
}
@PostMapping("/uploadFile")
public String uploadFile(@RequestPart(value = "file") MultipartFile file) {
return this.amazonClient.uploadFile(file);
}
@DeleteMapping("/deleteFile")
public String deleteFile(@RequestPart(value = "url") String fileUrl) {
return this.amazonClient.deleteFileFromS3Bucket(fileUrl);
}
}```
解决方案
您在这里调用了错误的 API 端点
onUpload() {
const formData = new FormData();
formData.append('image', this.selectedFile, this.selectedFile.name);
this.http.post('http://localhost:8080/storage/uploadFile', formData)
.subscribe(res => {
console.log(res);
});
}
推荐阅读
- java - 为什么“获取”错误类型的数据时,ResultSet 中的 get() 不抛出异常?
- python - 从 HTML 中提取特定列
- android - Android Studio Flutter 中没有“删除小部件”或“用其子代替换小部件”
- html - html和文本格式
- parsing - 从概率上下文无关语法生成的所有句子在语法上都是正确的吗?
- python - 在终端上打印 HTTP 标头
- uitableview - 在 Swift 5 中为 TableView 单元格创建圆形栏和自定义滑动?
- react-native - 我如何制作一个按钮,当点击下载应用程序的最新内容时?
- reactjs - array.reduce 不是 reactjs 中的函数
- php - 页面加载时如何附加动态输入字段?