Question

我有一个简单的反应形式，角度为6，它也有一个文件输入来上传图像。

方案是提交表单，保存图像和表单的文本字段，然后使用新图像更新照片库。对于照相馆，我使用ng carousel。

这是前端中的代码

<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包含成功保存表单数据，新图像的ID及其文件名后，来自服务器的数据。

在addpic中，我尝试在轮播中添加新图像。将所有新数据添加到数组中，以便稍后使用该数组ngFor并动态创建ng Carousel

  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“读取”文件，但这是一张图片，在轮播中，我需要提供src的URL，而不仅仅是提供图片文件。

我还在节点中使用了强大的功能来解析表单并获取图像的路径，将其连同ID和文件名一起返回到前端，并将其用作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中，全部在我的笔记本电脑上。

谢谢

Answer 1

可能与更新变量有关的问题引用相同的参考。在addPic（）内部。将这行代码添加为最后一行。

this.images = this.images.slice();

使用角度和节点上传图像后获取图像

1 个答案: