角度找不到上载的图像 [英] angular does not find an uploaded image
问题描述
场景很简单.使用表格上载图像，如果成功上载，请刷新相册.我使用angular6和 ng-carousel .所有系统都在我的Windows 10笔记本电脑中本地设置.
The scenario is simple. Use a form to upload an image and if it is successfully uploaded, refresh a photogallery. I use angular6 and ng-carousel. All the system is locally set in my windows 10 laptop.
上载表单，文本数据保存在数据库中，图像保存在节点8.11.1中的文件中.我将图像保存在src/assets/images中.我可以看到更改，并且上传时没有任何错误.
The form gets uploaded, the text data are saved on the database and the image is saved in a file in node 8.11.1. I save the image in the src/assets/images. I can see the changes and I get no errors while uploading.
但是，上传之后，我尝试使用新图像的URL将其添加为轮播中的最后一个图像，而我得到的只是一个404错误. URL类似于http://localhost:4200/assets/images/unsplash.jpg.URL有效，图像在那里，所有其他轮播图像都使用相同的URL.但是，新图像具有404错误.我必须重新编译有角度的应用程序才能查看图像.不只是刷新页面，而是重新编译整个应用程序.
But, after the upload, I try to use the URL of the new image to add it as the last image in the carousel and all I get is a 404 error. The URL is like http://localhost:4200/assets/images/unsplash.jpg The URL is valid, the image is there and all the other carousel images use the same URL. But, the new image has a 404 error. I have to recompile the angular app to see the image. Not just refresh the page, recompile the whole app.
我不知道该如何解决.我尝试在前端使用File对象或HTML5 FileReader API，而不依赖于图像上传后创建URL.但是他们没有URL，而ng-carousel需要像/assets/images/img.jpg这样的URL才能工作.为了使用某种URL，我还尝试从节点获取临时URL并将其返回到前端，但是由于它是temp文件夹URL，因此浏览器不允许我使用它.我还尝试使用 createObjectURL ，但是并非所有浏览器都支持.我还尝试在保存图像后执行GET并从数据库中获取所有图像名称，以使其再次循环并再次馈送轮播模板.没有.仍然是404错误.我必须重新编译该应用程序.
I dont know how to fix this. I tried using a File object or the HTML5 FileReader API on the front end and not depend on creating a URL after image upload. But they dont have a URL and the ng-carousel needs a URL like /assets/images/img.jpg to work. In order to use some kind of URL, I also tried to get the temporary URL from node and return it back to the front-end, but since it is a temp folder URL, browser wont let me use it. I also tried to use createObjectURL but is not supported in all browsers. I also tried to perform a GET after the image is saved and get all the images names from the database, to loop them again and feed the carousel template once again. Nothing. Still a 404 error. I have to recompile the app.
发生了什么事?这是一个有角度的6问题吗?安全限制?请帮我解决这个问题，我不知道该如何处理了.
What is happening? Is this a angular 6 issue? Security restriction? Please help me fix this, I dont know how to deal with it anymore.
代码概述.
表格
<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也可以当场删除图像.
html carousel template, add custom html to also delete an image on the spot.
<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传送轮播.
after successful form submit, update the array that feeds the carousel. Its a simple array of json objects like [{'id':1,'name':'James'},{'id':2,'name':'Nolan'}] and feeds the carousel via 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 中的代码逻辑
谢谢
推荐答案
这可能是您的解决方案:
This might be a solution for you:
对于实时应用程序，您可能希望将图像保存在文件服务器上(例如Amazon AWS上的AWS S3)，并将此文件的链接存储在数据库中.
For a live application you probably would want to save your images on a fileserver (for. example AWS S3 on Amazon AWS), and store the link to this file in a database.
对于您的本地主机项目，您可以使用 http服务器充当此文件服务器或者您可以将表达框架用于您的节点应用程序.
For your localhost project you can use http-server to function as this fileserver or you can use the express framework with ur node application.
npm install http-server -g
http-server C:/link/to/a/folder/you/have/saved/the/images/in
然后，您必须将链接保存到文件(在db(数据库)中或在文本文件中).为此，我建议您设置一个本地 MongoDB数据库.您可能需要花费一些时间才能进入，但这是很好的学习经验.您可以使用 https://mongoosejs.com/与您的节点应用程序进行通信.
Then you must save the link to your file, either in a db (database) or inn a textfile. For this I would recomend that you setup a local MongoDB database. This might take some time for you to get into, but it is good learning experience. You can use https://mongoosejs.com/ to communicate with your node application.
然后，当您上传新图像时，会将其从前端Angular应用程序发送到后端节点/express应用程序，将文件保存在文件夹中，并将链接保存在数据库中.使用https服务器，您将能够立即访问图像(可能会有som延迟).借助存储在数据库中的链接，您可以在每次刷新应用程序时通过http get请求将数据库中的数据发送到前端.
Then when you upload a new image, you send it from your frontend Angular app, to your backend node/express application, save the file in the folder and save the link in the db. With the https-server you will be able to access the image right away (with maybe som delay). And with the links stored in the db you can send the data in the db to your front end with a http get request whenever you refresh your application.
我希望这会帮助您实现目标:)
I hope this will help you to reach your goal :)
这篇关于角度找不到上载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
