无法使用 NodeJs/expressJs 在 Angular 8 中获取图像

Question

I am trying to upload image in nodejs using Multer and image upload. but while i am getting or binding images in Angular, i am getting angular router error. Angualr router listed on localhost:4200 and node router is localhost:4000

Multer use in Node

var multer  = require('multer');
const storage= multer.diskStorage({
    destination:(req,file,next) => {
      next(null,'upload')
    },
    filename:(req, file,next)=> {
      next(null, file.fieldname + '-' + Date.now()+ '.' + path.extname(file.originalname))
    }
});
const upload= multer({storage:storage});
router.post('/uploadimage', upload.single('file'), function (req, res) {
  res.json(req.file); 
  console.log(req.file);
})  

TS component

UserAdd() {
    const formData = new FormData();
    formData.append('file', this.image);
    this.adminServiceService.upload(formData)
    .subscribe((res: any) => {
      this.addUser.value.image = res.filename;
      this.adminServiceService.UserAdd(this.addUser.value)
      // tslint:disable-next-line:no-shadowed-variable
      .subscribe(res => {
        console.log(res);
        swal.fire({
         position: 'center',
         icon: 'success',
         title: 'User Add',
         showConfirmButton: false,
         timer: 1500
       });
        this.router.navigate(['/jobprovider']);
     });
    });
  }

  ngOnInit() {
  }
  selectImage(event: any) {
    if (event.target.files.length > 0) {
      console.log(event.target.files);
      const file = event.target.files[0];
      this.image = file;
    }
  }

html

<div>
          <label class="col-md-4">Picture</label>
          <input type='file' formControlName="filename" (change)="selectImage($event)">

bind html

<div class="avatar" style="position: relative; top:-50px;margin-bottom:-50px">
        <img alt ="" [src]="user.filename" style="width:100px; height: 100px; max-width: 100px; max-height: 100px; border-radius: 50%; border: 5px solid rgba(240, 178,122,0.5)">
      </div>

controller for save data

exports.addJobProvider = function(req, res){

   bcrypt.hash(req.body.userPassword, saltRounds, function(err, hash){
     let user= new User({
      userName : req.body.userName,
      userEmail:req.body.userEmail,
      userPassword: hash,
      userPhone: req.body.userPhone,
      filename: req.body.image,
      role: req.body.role,
    });
    user.save()
    .then(user => {
      res.status(200).json({'user': 'Save in Database'})
    })
    .catch(err => {
      res.status(400).send('Unabale to save in Database');
    });
  })
};

error

GET http://localhost:4200/file-1574398124428..jpg 404 (Not Found)

save in mongoDB

{
    "_id": {
        "$oid": "5dd768ace336751828bcb7b4"
    },
    "active": true,
    "deleted": false,
    "userName": "A",
    "userEmail": "a@a.com",
    "userPassword": "$2a$10$mcwpbUiMi1fsi52o3hteYeDhrnlJtZsmBlPzHkEDvmJMv.t6DKcyC",
    "userPhone": 7984564564,
    "filename": "file-1574398124428..jpg",
    "role": "jobprovider",
    "__v": 0
}

I am trying to upload image in nodejs using Multer and image upload. but while i am getting or binding images in Angular, i am getting angular router error. Angualr router listed on localhost:4200 and node router is localhost:4000

Answer 1

The problem is that you are trying to view an image that is not found, as you can see the url of the image you want to display is not correct.

First we have to think about how you want to handle your files, apparently you are storing the user's image in the database directly. If so you may be able to think about saving the image in base 64 or as you prefer but currently you only store the name of the file and when you access it because it is not in the correct direction.

In case you want to convert your image to base 64 in angular you can use this function.

 onImageSelect(event) { const newImage = event.target.files[0] as File; this.getBase64OfFile(newImage, (data) => { const image64 = data; }); } getBase64OfFile(file, callback) { const fr = new FileReader(); fr.addEventListener('load', (e) => { if (typeof callback === 'function') { callback(fr.result); } }); fr.readAsDataURL(file); }

Here you can get if you want only the base image 64 without the header and the file extension.

 onImageSelect(event, index) { const newImage = event.target.files[0] as File; const imageName = newImage.name.split('.'); const ext = imageName[imageName.length - 1]; this.getBase64OfFile(newImage, (data) => { const image64 = data.split(',')[1]; }); } getBase64OfFile(file, callback) { const fr = new FileReader(); fr.addEventListener('load', (e) => { if (typeof callback === 'function') { callback(fr.result); } }); fr.readAsDataURL(file); }

This is a way to handle images, otherwise you could serve the images on your server and save only the name in the database.

When you want to access your images you would only have to have the address of the server where you have stored your images and add the name that you have in the database. Example:

 <img *ngIf="image.image_name" [src]="environment.filesUrl + image.image_name" class="image">

In case you're going to show your images on base 64 directly in the html you can use something like this.

 <img *ngIf="image.image_name" [src]="'data:image/bmp;base64,' + image.image64" class="image">

You can decide how to handle your images but your mistake now is that you are accessing an address where there is no image.