如何使用Angular 2+，Express和nodeJs上传文件
我试图上传一个图像使用Angular 4，节点和Express与Multer库。
这里是我的route.js：
const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, 'uploads') }, filename: function(req, file, cb) { cb(null, file.fieldname + '-' + Date.now() + '.jpg') } }); const upload = multer({ storage: storage }).single('avatar'); router.post('/upload_avatar', function(req, res) { upload(req, res, function(err) { if (err) { // An error occurred when uploading throw err; } res.json({ sucess: true, message: 'Image was uploaded successfully' }); // Everything went fine }) }); 如果我使用邮差，它会工作，并将图像添加到我的项目上传目录。
这里是我的UserService.js
import { Injectable } from '@angular/core'; import {Http, Headers, RequestOptions} from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class UserService { user: any; filesToUpload: Array<File> = []; constructor(private http: Http) { } uploadAvatar(event){ let fileList: FileList = event.target.files; if(fileList.length > 0) { let file: File = fileList[0]; let formData:FormData = new FormData(); formData.append('uploadFile', file, file.name); let headers = new Headers(); /** No need to include Content-Type in Angular 4 */ // headers.append('Content-Type', 'multipart/form-data'); // headers.append('Accept', 'application/json'); this.http.post('http://localhost:3000/api/upload_avatar', formData, {headers: headers}) .map(res => res.json()) .catch(function(err){ throw err; }) .subscribe( data => console.log('success'), error => console.log(error) ) } }
和我的profile.component.ts使用这个function：
fileChangeEvent(event) { this.userService.uploadAvatar(event); }
最后我的HTML看起来像这样：
<div class="col-md-4"> <img [src]="userImg" class="img-thumbnail" alt=""> <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." /> <!-- <button type="button" (click)="upload()">Upload</button> -- > </div>
当我使用邮递员它的作品，所以我想这个问题已经与angular码。 我也认为它必须与标题或正文请求。 这里是我从节点服务器得到的错误：
C:\Users\admin\Desktop\project\contactlist\routes\route.js:33 throw err; ^ Error: Unexpected field at makeError node_modules\multer\lib\make- error.js:12:13) at wrappedFileFilter node_modules\multer\index.js:40:19) at Busboy.<anonymous> \node_modules\multer\lib\make-middleware.js:114:7) at emitMany (events.js:127:13) at Busboy.emit (events.js:201:7) at Busboy.emit node_modules\busboy\lib\main.js:38:33) at PartStream.<anonymous> ( node_modules\busboy\lib\types\multipart.js:213:13) at emitOne (events.js:96:13) at PartStream.emit (events.js:188:7) at HeaderParser.<anonymous> (node_modules\dicer\lib\Dicer.js:51:16) at emitOne (events.js:96:13) at HeaderParser.emit (events.js:188:7) at HeaderParser._finish (node_modules\dicer\lib\HeaderParser.js:68:8) at SBMH.<anonymous> (node_modules\dicer\lib\HeaderParser.js:40:12) at emitMany (events.js:127:13) at SBMH.emit (events.js:201:7)
我使用以下代码：
fileChange(event) { const fileList: FileList = event.target.files; if (fileList.length > 0) { const file: File = fileList[0]; const formData: FormData = new FormData(); formData.append('file', file, file.name); const headers = new Headers(); headers.append('Content-Type', 'multipart/form-data'); headers.append('Accept', 'application/json'); const body = JSON.stringify({ headers: headers }); this.http.post('https://bla.com', formData, body) .map(res => res.json()) .catch(error => Observable.throw(error)) .subscribe(data => { const Response = data['_status']; if (Response) { this.uploadFile.push(data); } else { this.showFileError = data['_error']; } } ); } }
HTML的模板：
<input class="file-hide" type="file" (change)="fileChange($event)">
只是改变了这一行：
formData.append('uploadFile', file, file.name);
至：
formData.append('avatar', file, file.name);
现在它的作品！