Загрузка изображения в Angular
Я пытался загрузить изображение с помощью Angular в хранилище Google. И все нормально работает с Postman. Но я застрял с угловым машинописным текстом. Может ли кто-нибудь предложить мне способ сделать это?
.html файл
<input type = "file" accept = "image/png, image/jpeg" class = "form-control upload-btn" formControlName = "imageUpload" placeholder = "Upload Images" (change) = "uploadImage($event)" required>
.ts-файл
uploadImage(event: any) {
if (event.target.files && event.target.files[0]) {
const uploadImage=event.target.files[0];
const fileObject = {
userId: this.userId,
bucketName: 'Test123',
image: uploadImage
};
this.userService.uploadImage(fileObject).subscribe(data=>{
},err=>{
console.info("error occured")
}
)
}
}
.сервисный файл
uploadImage(fileObject: any){
return this.http.post('http://localhost:1337' + 'upload-image' , fileObject);
}
Никаких ошибок не возникает на стороне бэкенда. Он отлично работал с Почтальон. Я не уверен в файле .тс.
можете ли вы поделиться URL-адресом, который вы используете в почтальоне для загрузки, можете ли вы опубликовать здесь URL-адрес
Привет @chintuyadavsara, ошибка в том, что он никогда не попадет внутрь this.userService.uploadImage(fileObject).subscribe(data=>{ } this. Поэтому изображение не добавило ведро
Привет @ManektechKnowledgeBase, я использовал http://localhost:1337/upload-image этот URL-адрес, который такой же, как в файле службы.
если он не входит внутрь, это может привести к ошибке, пожалуйста, проверьте, что это за ошибка, и дайте подробную информацию
@chintuyadavsara, пожалуйста, проверьте это. ошибка: {ошибка: SyntaxError: неожиданный токен U в JSON в позиции 0 в JSON.parse (<анонимный>) в XMLHtt…, текст: «Файл успешно загружен»} заголовки: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ} сообщение: «Ошибка HTTP во время синтаксического анализа для локальный хост: 1337/загрузить-изображение» имя: «HttpErrorResponse» ok: false статус: 200 statusText: «ОК» url: «локальный хост: 1337/загрузить-изображение»
@HariDev Пожалуйста, откройте инструменты разработчика Chrome, перейдите на вкладку сети и посмотрите ответ один раз, эта ошибка обычно возникает, когда сервер возвращает ошибку (например, ошибка сервера 500)
можете ли вы разделить полезную нагрузку как для почтальона, так и для полезной нагрузки со снимка экрана вкладки сети
uploadImage(fileObject: any){ return this.http.post(this.baseUrl + GlobalConstants.uploadImage , fileObject, { responseType: 'text'}); } когда я использую { responseType: 'text'} , он попал внутрь сервиса @chintuyadavsara. Но все еще не показано в ведре
Эй, попробуйте использовать FormData для загрузки любого изображения на сервер.
@PrasenjeetSymon, можете ли вы объяснить, как это сделать?
Вот пример, который показывает, как использовать FormData, предложенный @PrasenjeetSymon.
Спасибо ребята! Я мог бы использовать FormData. Спасибо за ваши решения.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как предложил @PrasenjeetSymon, использование FormData поможет загружать изображения в Angular.
Вот похожая тема, которые демонстрируют, как использовать FormData
You can use the tag from HTML:
<input type = "file" name = "file" id = "file" (change) = "onFileChanged($event)" />and in the component:
public files: any[]; contructor() { this.files = []; } onFileChanged(event: any) { this.files = event.target.files; } onUpload() { const formData = new FormData(); for (const file of this.files) { formData.append(name, file, file.name); } this.http.post('url', formData).subscribe(x => ....); }
Какую ошибку вы видите в интерфейсе/браузере или инструментах разработчика