Загрузка файлов/изображений на сервер S3 с использованием метода Angular HTTP PUT
Я работаю над приложением Angular, в котором мне нужно загружать файлы или изображения на сервер S3, используя метод http.put. Я написал следующий код, но столкнулся с проблемами в процессе загрузки. Вот мой код:
uploadFileToS3(fileUrl: string, file: File): Observable<any> {
const formData = new FormData();
formData.append('data', file);
const headers = new HttpHeaders({
'Content-Type': file.type
});
return this.http.put<any>(fileUrl, formData, { headers: headers });
}
URL = ссылка
Однако когда я пытаюсь загрузить файл с помощью этой функции, я получаю ответ: «В запросе нет доступных данных». Я также попытался установить тип контента в заголовках, но, похоже, это не работает.
Может ли кто-нибудь подсказать мне, как решить эту проблему и успешно загрузить файлы или изображения на сервер S3 с помощью метода HTTP PUT Angular? Есть ли что-то конкретное, что мне нужно учитывать с точки зрения заголовков или форматирования запроса?
когда я пытался скачать или просмотреть этот файл, возникла проблема
код для загрузки файла на s3
uploadFileToS3(fileUrl, file) {
var formData = new FormData();
formData.append('data', file);
const headers = new HttpHeaders({
'Content-Type': "multipart/form-data"
});
return this.http.put<any>(fileUrl, formData, {
responseType: 'text' as 'json'
});
}
Заранее спасибо за вашу помощь!
это не ответ, но вы должны знать, что когда вы отправляете объект FormData(), заголовки и тип контента устанавливаются автоматически. (Не передавайте/устанавливайте заголовки при отправке FormData()...)
Ответы 2
Чтобы достичь того, что вы хотите, вам нужно следующее:
В вашем компоненте есть функция получения файла из формы:
onFileSelected(event: any) {
const file: File = event.target.files[0];
if (file) {
this.http.put(url, file, {
headers: {
'Content-Type': file.type
},
reportProgress: true,
observe: 'events'
}).subscribe({
next: (event) => {
console.info(event); // Handle the upload progress
},
error: (error) => {
console.error('Upload failed:', error);
},
complete: () => {
console.info('Upload complete');
}
});
}
Теперь в вашем шаблоне что-то вроде этого:
<input type = "file" (change) = "onFileSelected($event)">
Некоторые важные примечания:
- Как видите, хотя отправка файла из браузера непосредственно в корзину s3 возможна, это очень небезопасная и плохая практика. Здесь мы предполагаем, что ваша корзина полностью общедоступна и принимает загрузки от кого угодно, за исключением случаев, когда ваше приложение является закрытым и клиент разрешил доступ к корзине (что технически возможно, например, через прямое подключение или VPN-подключение к VPC с шлюзом к s3).
- Более подходящий способ добиться этого — либо: а) иметь серверную часть, обрабатывающую запрос (аутентификацию, авторизацию и проверку), а затем пересылку его в корзину s3; б) наличие внутренней функции — например, лямбда — для возврата предварительно подписанного URL-адреса для корзины s3
Я попробовал это решение вместо того, чтобы напрямую использовать метод HTTP-метода PUT, использовать объект запроса и создавать заголовки запросов, а имя метода, переданное им для запроса метода, будет решено: Решение здесь,
uploadFileToS3(presignedUrl, file) {
const headers = new HttpHeaders({
'Content-Type': file.type,
});
const req = new HttpRequest(
'PUT', presignedUrl, file, { headers: headers }
);
return this.http.request<any>(req);
}используя анализ изображения «new formData()» до нулевого размера, чтобы он не использовался
вы можете расставить все точки без formData(); константные заголовки: HttpHeaders = новые HttpHeaders(); headers.set('Content-Type', file.type); return this._httpClient.put<object>(signedUrl, file, {headers});