如何解决Bacakend图片未完全加载到Angular应用的<img>标记中
我正在尝试创建一个Angular Reactive Form,当您上传图像时,它会自动将其添加到后端并将URL返回到存储在表单数据中的图像
返回的网址由和标记加载,以显示上传的图像。
此标签未完全加载图像,我不知道问题出在哪里,因为当我在新标签页中打开后端链接时,图像加载完美。另外,有时我会收到类似net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
图像示例:
HTML:
<!-- Name Form -->
<div class="input-group form-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Employee ID</span>
</div>
<input type="text" [attr.disabled]="true" class="form-control" formControlName="emp_id">
</div>
<!-- Employee ID Form -->
<div class="input-group form-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Entry Number</span>
</div>
<input id="entry_num" [attr.disabled]="true" formControlName="entry_num" class="form-control" readonly>
</div>
<!-- Accompany Form -->
<div class="input-group form-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Number of people accompanying the Visitor</span>
</div>
<input type="number" min="1" required [class.is-invalid]="accompany.invalid && accompany.touched"
class="form-control" formControlName="accompany">
</div>
<small class="text-danger" *ngIf="accompany.invalid && accompany.touched">Number is Required</small>
<small class="text-danger" *ngIf="entryUpdate.controls['accompany'].value<1 && accompany.touched">Number should be
positive</small>
<!-- Pass ID Form -->
<div class="input-group form-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Pass ID assigned to Visitor</span>
</div>
<input type="number" min="1" required [class.is-invalid]="pass_id.invalid && pass_id.touched" class="form-control"
formControlName="pass_id">
</div>
<small class="text-danger" *ngIf="pass_id.invalid && pass_id.touched">Pass ID is Required</small>
<small class="text-danger" *ngIf="entryUpdate.controls['pass_id']?.value<1 && pass_id.touched">Number should be
positive</small>
<!-- Entry Time Form -->
<div class="form-group input-group mt-3">
<div class="input-group-prepend pr-4">
<span class="input-group-text">Time of Entry</span>
</div>
<ngb-timepicker formControlName="entry_time" required></ngb-timepicker>
</div>
<!-- Add Image -->
<div>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Upload Image
</label>
<input type="file" (change)="onFileSelect($event)" id="file-upload">
</div>
<div class="media" *ngIf="entryUpdate.controls['image'].value">
<div class="media-left">
<img class="media-object" [attr.src]="entryUpdate.controls['image'].value" alt="entry image">
</div>
</div>
<!-- Remark Form -->
<div class="input-group form-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Remarks</span>
</div>
<input type="text" class="form-control" formControlName="remarks">
</div>
<!-- Submit button -->
<div class="row mt-5">
<div class="col-lg-12">
<button id="submit" [disabled]="entryUpdate.invalid" class="btn btn-primary float-right"
type="submit">Submit</button>
</div>
</div>
打字稿:
import { Component,OnInit } from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import { FormBuilder,Validators } from '@angular/forms';
import { GuardService } from 'src/app/services/guard.service';
@Component({
selector: 'app-entry',templateUrl: './entry.component.html',styleUrls: ['./entry.component.css']
})
export class EntryComponent implements OnInit {
constructor(private guardService: GuardService,private route: ActivatedRoute,private router: Router,private fb: FormBuilder) { }
// variables
entryUpdate = this.fb.group({
emp_id: [''],entry_num: [''],accompany: ['',Validators.required],pass_id: ['',entry_time: [{ hour: 8,minute: 0 },image: ['',remarks: ['']
})
submitted: boolean = false;
errMsg: string = null;
message: string = null;
// form functions
get accompany() { return this.entryUpdate.get('accompany'); }
get pass_id() { return this.entryUpdate.get('pass_id'); }
get entry_time() { return this.entryUpdate.get('entry_time'); }
ngOnInit(): void {
// accompany,pass_id
this.entryUpdate.controls['emp_id'].setValue(parseInt(this.route.snapshot.paramMap.get("emp_id")));
this.entryUpdate.controls['entry_num'].setValue(parseInt(this.route.snapshot.paramMap.get("entry_num")));
this.submitted = false
}
onFileSelect(event) {
console.log(event);
const formData = new FormData();
formData.append('file',<File>event.target.files[0])
const emp_id = this.entryUpdate.controls['emp_id'].value
const entry_num = this.entryUpdate.controls['entry_num'].value
this.guardService.createImage(formData,emp_id,entry_num)
.subscribe(data => {
console.log("sucess in adding image")
},err => {
console.error(`error occored in image upload : ${err}`)
})
const MIME_TYPE_MAP = {
'image/png': 'png','image/jpeg': 'jpg','image/jpg': 'jpg'
}
const ext = MIME_TYPE_MAP[event.target.files[0].type];
const path = this.guardService.getImagePath(`${emp_id}-${entry_num}.${ext}`)
this.entryUpdate.controls['image'].setValue(path);
// const img = document.getElementById('imgPath') as HTMLImageElement;
// img.src = path.toString + '?' + new Date().getTime();
// console.warn(path.toString + '?' + new Date().getTime());
}
onSubmit() {
this.submitted = true;
// changing the "entry_time" attribute to a string
var time = this.entryUpdate.controls['entry_time'].value;
var hour = (time.hour).toString().padStart(2,"0");
var min = (time.hour).toString().padStart(2,"0");
this.entryUpdate.controls['entry_time'].setValue(`${hour}-${min}`)
// clearing space
time = hour = min = null;
console.warn(this.entryUpdate.value);
// updatingting entry
this.guardService.onEntry(this.entryUpdate.value)
.subscribe(data => {
this.message = "Updation Sucessful";
},err => {
this.errMsg = err.statusText;
});
}
reset() {
window.location.reload();
}
goBack() {
this.router.navigate(['guardDash']);
}
}
后端:
//Get image to show
router.get('/image/:img',async (req,res) => {
// Access the provided 'page' and 'limt' query parameters
let img = req.params.img;
let imgPath = `../../assets/${img}`
const imgUrlPath = path.join(__dirname,imgPath)
res.sendFile(imgUrlPath);
});
//post and save image to show
router.post('/image/:emp_id/:entry_num',multerImage,res) => {
const file = req.file
if (file) {
res.status(200).json("image added");
} else {
res.status(500).json("image problem");
}
})
multer中间件:
const multer = require('multer');
const MIME_TYPE_MAP = {
'image/png': 'png','image/jpg': 'jpg'
}
// storage management of the upload file
var storage = multer.diskStorage({
destination: (req,file,cb) => {
cb(null,'./backend/assets');
},filename: (req,cb) => {
// extension
const ext = MIME_TYPE_MAP[file.mimetype];
// Access the provided 'page' and 'limt' query parameters
let emp_id = req.params.emp_id;
let entry_num = req.params.entry_num;
let nameImg = `${emp_id}-${entry_num}.${ext}`
cb(null,nameImg);
}
});
// var upload = multer({ storage: storage });
module.exports = multer({ storage: storage }).single('file');
当我在标签中放置随机图像URL而不是动态后端图像链接时,每次都完美加载了图像?可能是什么问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。