上传图像后，在前端未找到Angular显示404，但是如果完成了角度构建，则会显示图像 [英] Angular shows 404 not found in the frontend when image has been uploaded but shows image if angular build has done
问题描述
我正在使用带有Node js，express和mongodb的angular 5来上传带有一些数据的图像.所有数据都保存到mongodb中，没有任何问题，但是当我尝试显示上传的图像时，它显示404找不到，即使该图像仍然存在于uploads文件夹中.我什至尝试用图像名称对路径进行硬编码，但仍然显示404错误.但是，如果我更改了角度代码(在经过一些变更后建立了角度)或建立了角度，则它会显示图像.
I am using angular 5 with Node js, express and mongodb to upload images with some data. All the data are saving into mongodb without any issue but when I am trying to show the uploaded images it is showing 404 not found even the image is still exist in the uploads folder. I have even tried to hardcode the path with the image name but still its showing 404 error. But if I make some change in the angular code(which builts angular after some chnages) or built the angular it shows the image.
I searched on stackoverflow and got similar issue like this so now I am uploading images in the nodejs root folder.
这是express.js的代码
Here is the code for express.js
/* ===================
Import Node Modules
=================== */
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const passport = require('passport');
const bodyParser = require('body-parser');
const path = require('path');
const appRoot = require('app-root-path');
const mongoose = require('mongoose');
const app = express();
const router = express.Router();
const multer = require('multer');
//custom module
const event = require('../config/routes/event.router');
const port = process.env.PORT || 8080; // Allows heroku to set port
mongoose.Promise = global.Promise;
//assigning value
process.env.NODE_ENV = 'devlopment';
/**
* Assiging port to server
*/
const server = app.listen(port, () => {
console.log('Listening on port ' + port + ' in ' + process.env.NODE_ENV + ' mode');
});
/**
* Database connection
*/
mongoose.connect(config.uri, {
//useMongoClient: true,
}, (err) => {
// Check if database was able to connect
if (err) {
console.log('Could NOT connect to database: ', err); // Return error message
} else {
console.log('Connected to ' + config.db); // Return success message
}
});
/**
* Require Middleware
*/
app.use(helmet());
app.use(passport.initialize());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
/**
* Every Http request start from index file
*/
app.use(express.static(path.join(appRoot.path, 'dist')));
app.use('/api/event', event); //Event Router
app.get('*', (req, res) => {
res.sendFile(path.join(appRoot.path, 'dist/index.html'));
});
这是我的event.router.js文件，看起来像这样
Here is my event.router.js file looks like this
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
const Event = require('../../model/event.model');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/uploads/');
},
filename: function (req, file, cb) {
let ext = file.originalname.substring(file.originalname.lastIndexOf('.'), file.originalname.length);
cb(null, Date.now() + ext);
}
})
var upload = multer({ storage: storage }).single('eventimage');
/* SAVE EVENT */
router.post('/', function(req, res, next) {
upload(req, res, function(err) {
if( req.body.eventname == undefined || req.body.eventname == '' ) {
res.json({ success : false, message: 'You must provide event name!' });
}
else if( req.file == undefined || req.file == '' ) {
res.json({ success : false, message: 'You must provide event image!' });
}
else {
let event = new Event ({
_id : new mongoose.Types.ObjectId(),
eventname : req.body.eventname,
eventimage : req.file,
});
event.save((err) => {
if(err) {
if( err.errors ) {
if( err.errors.eventname ) {
res.json({ success: false, message: err.errors.eventname.message });
}
}
else {
res.json({ success: false, message: 'Could not save Event. Error: ', err });
}
}
else {
res.json({ success: true, message: 'Event saved'});
}
});
}
});
});
module.exports = router;
这是我的event-create.component.html外观
Here is my event-create.component.html looks like
<div class="container col-md-12">
<h1 class="page-header">Create Event</h1>
<form [formGroup] = "form" (ngSubmit)="onEventSubmit()">
<fieldset>
<div class="form-group">
<label for="eventname">Event Name</label>
<input type="text" class="form-control" autocomplete="off" placeholder="Event Name" formControlName="eventname">
</div>
<div class="form-group">
<label for="eventimage">Upload Image For Event</label>
<image-upload name="eventimage" [max]="1" [buttonCaption]="'Select Event Image!'"
[extensions]="['jpg','png']" (removed)="onRemoved($event)"
(uploadFinished)="onUploadFinished($event)"
(uploadStateChanged)="onUploadStateChanged($event)" [class]="'eventimage'">
</image-upload>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</fieldset>
</form>
</div>
event-create.component.ts看起来像这样
event-create.component.ts looks like this
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { FormControlName } from '@angular/forms/src/directives/reactive_directives/form_control_name';
import { FileHolder } from "angular2-image-upload/lib/image-upload/image-upload.component";
import { EventService } from '../event.service';
@Component({
selector: 'app-event-create',
templateUrl: './event-create.component.html',
styleUrls: ['./event-create.component.css']
})
export class EventCreateComponent implements OnInit {
public file_form;
public eventData;
form : FormGroup;
formData = new FormData();
constructor(
private formBuilder : FormBuilder,
private eventService : EventService
) { this.createEventForm() }
createEventForm() {
this.form = this.formBuilder.group({
eventname: ['', Validators.compose([
Validators.required,
Validators.minLength(5)
])],
eventimage: ['',]
})
}
ngOnInit() {
this.form = new FormGroup({
eventname: new FormControl('', [ Validators.required, Validators.minLength(5)]),
eventimage: new FormControl(''),
});
}
onEventSubmit() {
if( this.file_form == undefined ) {
let formData:FormData = new FormData();
this.file_form = formData;
}
this.eventData = this.file_form;
this.eventData.append('eventname', this.form.value.eventname);
this.eventService.addNewEvent(this.eventData).subscribe( data => {
if( !data.success ) {
this.messageClass = 'alert alert-danger';
this.message = data.message;
}
else {
this.messageClass = 'alert alert-success';
this.message = data.message;
}
});
}
public onUploadFinished(file: FileHolder) {
this.formData.append('eventimage', file.file, file.file.name);
this.file_form = this.formData;
}
}
这是事件详细信息，我在其中获取带有图像的mongodb数据
Here is the event details where I am getting the data from mongodb with image
event-detail.component.ts看起来像这样
event-detail.component.ts looks like this
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params} from "@angular/router";
import { HttpClient } from '@angular/common/http';
import { EventService } from '../../../admin/events/event.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'app-event-detail',
templateUrl: './event-detail.component.html',
styleUrls: ['./event-detail.component.css'],
})
export class EventDetailComponent implements OnInit {
event = {};
eventname;
absolutePath = 'public/uploads';
constructor(
private route: ActivatedRoute,
protected eventService: EventService,
) { }
ngOnInit() {
this.route.params.switchMap((params: Params) => {
let id = params['id'];
return this.eventService.getEvent(id);
}).subscribe(response => {
this.event = response;
this.eventname = this.event['eventname'];
this.eventImage = this.event['eventimage']['filename'];
}, err => {
console.log(err);
});
}
}
和event-details.component.html看起来像这样
and event-details.component.html looks like this
<div class="main-content">
<div class="container">
<div class="row">
<div class="col-md-5">
<img class="event_listing" src= "{absolutePath}/{eventImage}">
</div>
<div class="col-md-7">
<h4 class="page-header">{{eventname}}</h4>
</div>
</div>
</div>
</div>
推荐答案
之所以会出现此问题，是因为我们将dist文件夹用作静态文件夹.
This problem occurs because we are using dist folder as a static folder.
app.use(express.static(path.join(appRoot.path, 'dist')));
我要做的是，我使用您正在执行的过程来构建整个应用程序，一旦我们将网站托管在服务器上，就无需再次构建.只需确保您要上传的功能正常运行即可.
what I did is, I build the whole application using the process that you are doing and once we host the website on the server no need to re-build again. Just make sure that you're upload functionality is working properly.
这篇关于上传图像后，在前端未找到Angular显示404，但是如果完成了角度构建，则会显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
