html - Bacakend 图像未完全加载到 Angular 应用程序的标记中

Question

我正在尝试创建一个Angular Reactive Form，当您上传图像时，它会自动将其添加到后端并将url返回到存储在表单数据中的图像

返回的 url 由标签加载，以显示上传的图像。

这个标签没有完全加载图像，我不知道问题出在哪里，因为当我在新选项卡中打开后端链接时，图像正在完美加载。另外，有时我会收到类似的错误net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

图片示例：

网页：

<!-- 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: ['', Validators.required],
    entry_time: [{ hour: 8, minute: 0 }, Validators.required],
    image: ['', Validators.required],
    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, async (req, 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/jpeg': 'jpg',
    'image/jpg': 'jpg'
}

// storage management of the upload file
var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './backend/assets');
    },
    filename: (req, file, 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 而不是我的动态后端图像链接时，图像每次都能完美加载？？可能是什么问题呢？？

标签： htmlnode.jsangulartypescriptweb