Сценарий прост.Используйте форму для загрузки изображения и, если оно успешно загружено, обновите фотогалерею.Я использую angular6 и ng-carousel .Вся система локально установлена на моем ноутбуке с Windows 10.
Форма загружается, текстовые данные сохраняются в базе данных, а изображение сохраняется в файле на узле 8.11.1.Я сохраняю изображение в src/assets/images.Я вижу изменения и не получаю ошибок при загрузке.
Но после загрузки я пытаюсь использовать URL нового изображения, чтобы добавить его в качестве последнего изображения в карусели, и все, что я получаю, это ошибка 404.URL-адрес похож на http://localhost:4200/assets/images/unsplash.jpg URL-адрес действителен, изображение есть, и все другие изображения карусели используют тот же URL-адрес.Но новое изображение имеет ошибку 404.Я должен перекомпилировать угловое приложение, чтобы увидеть изображение.Не просто обновить страницу, перекомпилировать все приложение.
Я не знаю, как это исправить.Я пытался использовать объект File или HTML5 FileReader API на внешнем интерфейсе и не зависел от создания URL-адреса после загрузки изображения.Но у них нет URL, и для работы ng-carousel нужен URL типа /assets/images/img.jpg.Чтобы использовать какой-то URL-адрес, я также попытался получить временный URL-адрес от узла и вернуть его обратно во внешний интерфейс, но, поскольку это URL-адрес папки temp, браузер не позволит мне его использовать.Я также пытался использовать createObjectURL, но поддерживается не во всех браузерах.Я также попытался выполнить GET после сохранения изображения и получить все имена изображений из базы данных, снова зациклить их и снова передать шаблон карусели.Ничего такого.Все еще ошибка 404.Я должен перекомпилировать приложение.
Что происходит?Это угловой вопрос 6?Ограничение безопасности?Пожалуйста, помогите мне исправить это, я не знаю, как с этим бороться.
Схема кода.
форма
<form *ngIf="pointPartsActive" [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted($event.target)" >
<input type="file" (change)='imageChange($event)' #imageInput id="imageInput" name = 'imageInput' accept=".png, .jpg, .jpeg, .gif" formControlName="imageInput" >
<input type="text" formControlName="imageName" name='imageName' placeholder="name" >
<button type="submit" >Submit</button>
</form>
html шаблон карусели, добавьте пользовательский htmlтакже удалить изображение на месте.
<ngb-carousel #carousel *ngIf="images" (slide)="onSlide($event)">
<ng-template ngbSlide *ngFor="let im of images; let i = index" id="{{im.id}}">
<img src='../assets/images/{{im.name}}' >
<div class='carousel-img-details'>
<button type="button" (click)='deletepic(im.photoId)'>delete</button>
</div>
</ng-template>
</ngb-carousel>
отправка формы
imageUploadSubmitted(form){
let formData = new FormData(form);
let eb =null;
this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
event=>{
if(event.type === HttpEventType.Response){
eb = event.body;
if(eb.success){
this.imageUpload.reset();
this.addpic(eb.data);
}
}
});
}
после успешной отправки формы обновите массив, который передает карусель.Это простой массив json-объектов, таких как [{'id':1,'name':'James'},{'id':2,'name':'Nolan'}], который передает карусель через ngFor.
addpic(data){
let slide = null;
this.images.push({
'photoId':Number(data.id)
'id': this.images.length,
'name': data.name
});
//get the id of the last slide and go there :
setTimeout(() => {
slide = this.images[this.images.length-1].id;
this.carousel.select(slide);
});
this.images = this.images.slice(); //try to "refresh" array itself
}
Логика кода в stackblitz
Спасибо