是否可以在angular上使用最近上传的图像？

由 发布于 angulartypescript
 收藏

我正在使用快递服务器，该服务器上载我的用户用作头像的图像。有一个选项可以更改您的头像，并且在上载图像和更改数据库后，现在将“ avatar”属性更改为新图像，例如“ new-image.png”。甚至刷新页面，服务器都找不到图像，直到我完全重新启动它为止。有没有办法不需要全部重新启动？

server.js

const path = require('path');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const app = express();

const DIR = './src/assets/uploadedImages';

let storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, DIR);
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});
let upload = multer({storage: storage});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

app.get('/api', function (req, res) {
  res.end('file catcher example');
});

app.post('/api/upload',upload.single('photo'), function (req, res) {
    if (!req.file) {
        console.log("No file received");
        return res.send({
          success: false
        });

      } else {
        console.log('file received');
        return res.send({
          success: true,
          filename: req.file.filename
        })
      }
});

const PORT = process.env.PORT || 4000;

app.listen(PORT, function () {
  console.log('Node.js server is running on port ' + PORT);
});

change-avatar.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FirestoreService } from '../../../services/firestore/firestore.service';
import {  FileUploader, FileSelectDirective } from 'ng2-file-upload';


const URL = 'http://localhost:4000/api/upload';

@Component({
  selector: 'app-change-avatar',
  templateUrl: './change-avatar.component.html',
  styleUrls: ['./change-avatar.component.css']
})
export class ChangeAvatarComponent implements OnInit {
  avatarForm: FormGroup;
  public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'photo' });
  constructor(
    private fb: FormBuilder,
    private fireservice: FirestoreService) { }

  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      console.log(response);
      var filename = JSON.parse(response).filename;
      this.avatarForm.value.avatar = filename;
      this.updateAvatar(this.avatarForm.value);
    };

    this.createForm();
  }
  createForm() {
    this.avatarForm = this.fb.group({
      avatar: ['',Validators.required]
    });
  }

  updateAvatar(value){
    this.fireservice.updateAvatar(value);
  }
}

change-avatar.component.html

<form [formGroup]="avatarForm">

<input type="file" name="avatar" formcontrolName="avatar"  (onFileDrop) ="console.log(event)"ng2FileSelect [uploader]="uploader" />

<button type="submit" (click)="uploader.uploadAll()" class="btn btn-default">Subir</button>
</form>
评论