angular4上传图片并传到服务器并保存到数据库(express和mongoose，mongodb)

// Angular组件代码
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  selectedImage: File;

  constructor(private http: HttpClient) { }

  onFileSelected(event: any) {
    this.selectedImage = event.target.files[0];
  }

  onUpload() {
    const reader = new FileReader();
    reader.onload = () => {
      const imageData = reader.result as string;
      this.uploadImage(imageData);
    };
    reader.readAsDataURL(this.selectedImage);
  }

  uploadImage(imageData: string) {
    this.http.post('/api/upload', { image: imageData }).subscribe(
      (response) => {
        console.log('Image uploaded successfully');
      },
      (error) => {
        console.error('Error uploading image:', error);
      }
    );
  }
}

// Express服务器端代码
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost/mydatabase', { useNewUrlParser: true });

// 定义数据库模式和操作
const imageSchema = new mongoose.Schema({
  image: String
});
const Image = mongoose.model('Image', imageSchema);

// 处理图片上传请求
app.post('/api/upload', (req, res) => {
  const imageData = req.body.image;
  const image = new Image({ image: imageData });
  image.save((error) => {
    if (error) {
      console.error('Error saving image:', error);
      res.status(500).send('Error saving image');
    } else {
      res.send('Image uploaded and saved successfully');
    }
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});