下面是一个使用 Angular 上传图片到 Node.js Multer 的示例代码:
Angular 代码:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private http: HttpClient) {}
uploadFile(event) {
const file = (event.target as HTMLInputElement).files[0];
const formData = new FormData();
formData.append('file', file);
this.http.post('http://localhost:3000/upload', formData).subscribe(
res => console.log(res),
err => console.log(err)
);
}
}
Node.js 代码:
const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './uploads');
},
filename: function(req, file, cb) {
cb(null, file.originalname);
}
});
const upload = multer({storage: storage});
app.post('/upload', upload.single('file'), function(req, res) {
console.log(req.file);
res.send('File uploaded successfully!');
});
app.listen(3000, function() {
console.log('Server started');
});
需要注意的地方: