У меня есть простая реактивная форма в angular 6, что она также имеет файл ввода для загрузки изображений.
Сценарий заключается в отправке формы, сохранении изображения и текстовых полей формы, а затем обновлении фотогалереи новым изображением.Для фотогалереи я использую ng карусель .
Это код в интерфейсе
<form [formGroup]="myForm" (ngSubmit)="submitForm($event.target)" >
<input type="file" (change)='imageChange($event)' formControlName="imageInput" name = 'imageInput'>
<input type="text" formControlName="imageName" name='imageName'>
<button type="submit" >Submit</button>
</form>
сохранить его как
submitForm(form){
let formData = new FormData(form);
this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
event=>{
if(event.type === HttpEventType.Response){
eb = event.body;
this.addpic(eb.data);
}
});
}
eb.data содержит данные, полученные с сервера, после успешного сохраненияданные формы, идентификатор нового изображения и имя его файла.
В addpic Я пытаюсь добавить новое изображение в карусель.Добавьте все новые данные в массив, чтобы я мог позже использовать этот массив, ngFor создать его и динамически создать ng Карусель
addpic(data){
this.images.push({
'id': data.id,
'name': data.name
});
}
, использовать его так, как
<ngb-carousel #carousel *ngIf="images" >
<ng-template ngbSlide *ngFor="let im of images; let i = index" id="{{im.id}}">
<img src='../assets/images{{im.newName}}' >
</ng-template>
</ngb-carousel>
Так что это прекрасно работает, но изображение никогда не отображается.Я не получаю ошибок, я вижу все данные, сохраненные в моей базе данных, изображение передается в папку, как и должно быть, но нет нового изображения в карусели, просто ошибка 404 в консоли.Массив images обновлен, но в карусели нет изображения.URL в порядке, все остальные изображения с таким же URL отображаются в карусели.Как будто приложение не успело увидеть все обновление, поэтому оно не может показать изображение.
Я попытался извлечь объект файла изображения из формы, сохранить его в угловом формате в selectedFile: File; и использовать его в карусели, но в нем нет path или чего-либо подобного.Возьмите его, когда он установлен в форме
imageChange(e){
this.selectedFile = e.target.files[0];
}
, и используйте его в addpic
addpic(data){
this.images.push({
'id': data.id,
'name': this.selectedFile.path
});
}
Я также пытался использовать formData перед отправкой формы, чтобы получитьизображение, но результат тот же, объект без пути.
Я также пытался «прочитать» файл, используя HTML5 FileReader, но это изображение, и в карусели мне нужно предоставить URL для src, а не только файл изображения.
Я также использовал formidable в узле, чтобы проанализировать форму и взять путь к изображению, вернуть его обратно во внешний интерфейс вместе с идентификатором и именем файла и использовать его в качестве src.Но это не будет использоваться браузером по соображениям безопасности, потому что это URL в временных файлах.
Я также попытался получить все изображения с сервера с помощью запроса, но новое изображение все еще не доступно, выдавая ошибку 404, даже если изображение находится в папке и база данных обновлена.
вот так
addpic(data){
this.getImages(this.currentId); //get all images again
this.images.push({
'id': this.images.id,
'name': this.images.path
});
}
Мне нужно обновить страницу для показа изображения.Я не знаю, как это исправить.Есть идеи?Это проблема безопасности, из-за которой я не могу сразу получить изображение, даже если оно сохранено и мне нужно обновить его?Я хотел бы избежать выполнения дополнительных get, если это возможно, чтобы поддерживать минимальное взаимодействие между клиентом и сервером.
Я использую angular6 и узел 8.11.в windows 10 все локально в моем ноутбуке.
Спасибо