问题描述: 在Angular 8中,当向服务器上传文件时,服务器收到的却是垃圾数据而不是文件数据。
解决方法:
1.确保在表单中正确设置enctype属性为"multipart/form-data",以便正确地将文件数据传递给服务器。
2.确保在Angular中正确处理文件数据,并将其发送给服务器。
import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
constructor(private http: HttpClient) { }
onFileChange(event) {
const file = event.target.files[0];
this.uploadFile(file);
}
uploadFile(file) {
const formData = new FormData();
formData.append('file', file);
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
this.http.post('http://localhost:3000/upload', formData, { headers: headers })
.subscribe(response => {
console.log(response);
});
}
}
3.确保服务器端正确处理接收到的文件数据。
使用Node.js和Express框架为例:
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
// 处理接收到的文件
console.log(req.file);
// 返回响应
res.send('文件上传成功!');
});
app.listen(3000, () => {
console.log('服务器启动成功!');
});
使用上述步骤,确保前端和后端都正确处理文件数据,即可解决Angular 8中服务器收到垃圾数据而非文件数据的问题。