角度找不到上传的图像

Question

场景很简单。使用表单上传图片，如果上传成功，刷新相册。我使用 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 需要像 /assets/images/img.jpg 这样的 URL 才能工作。为了使用某种 URL，我也尝试从节点获取临时 URL 并将其返回给前端，但由于它是 temp 文件夹 URL，浏览器不会让我使用它。我也尝试使用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中的代码逻辑

谢谢

Answer 1

Angular 使用 AOT(Ahead of Time) 编译，它将读取编译时可用的现有文件。上传的图片要保存在服务器端代码中，例如：文件夹server/uploads。

当调用图像链接的API时，响应可以有baseURL/file-name。对于您的开发服务器，它将是localhost:3000/uploads/unsplash.jpg。确保您已将上传文件夹设为静态。

如果您在服务器端使用节点 JS (Express)，这里有一个示例

const fs = require('fs-extra')
app.use(express.static(__dirname + '/uploads'));

app.get('/gallery',(req, res) => {
    fs.readdir(('./uploads'),(err,files) => {
            let filePath = []
            files.forEach(filename => {
                filePath.push('http://localhost:3000/uploads/' + filename)
            })
            res.json({
                files: filePath
            })
    })
})

app.listen(3000, () => {
    console.log('Server started on port:', 3000)
})

这将为您提供uploads文件夹中图像的路径，并且可以在客户端查看，而不是将其存储在资产文件夹中

Answer 2

这可能是您的解决方案：

对于实时应用程序，您可能希望将图像保存在文件服务器上（例如 Amazon AWS 上的 AWS S3），并将指向该文件的链接存储在数据库中。

对于您的 localhost 项目，您可以使用 http-server 作为此文件服务器，或者您可以将 express framework 与您的节点应用程序一起使用。

npm install http-server -g
http-server C:/link/to/a/folder/you/have/saved/the/images/in

然后您必须将链接保存到您的文件中，无论是在 db（数据库）中还是在文本文件中。为此，我建议您设置一个本地 MongoDB database。您可能需要一些时间才能进入，但这是很好的学习经历。您可以使用https://mongoosejs.com/ 与您的节点应用程序进行通信。

然后，当您上传新图像时，将其从前端 Angular 应用程序发送到后端节点/express 应用程序，将文件保存在文件夹中并将链接保存在数据库中。使用 https-server，您将能够立即访问图像（可能会有一些延迟）。通过存储在 db 中的链接，您可以在刷新应用程序时通过 http get 请求将 db 中的数据发送到前端。

我希望这会帮助你实现你的目标:)