[英]File not sending from Angular to Nodejs
我正在使用ngx-awesome-uploader将我的图像添加到 angular 以发送到后端。 我正在尝试将文件发送到我的 nodejs 后端,但它一直在后端返回{}
文件所在的位置。 以前从未处理过文件,但我会根据有根据的猜测并说那里应该有一些东西。
在前端,看起来文件是要发送的,因为console.log(fileUpload.file);
后端输出
File Upload Section
{ file: {}, fileName: 'image.png' }
但是从控制台输出中可以看出,在后端接收时为空。 不知道为什么。 我感谢您的帮助!
文件选择器.adapter.ts
import { FilePreviewModel } from 'ngx-awesome-uploader';
import { HttpRequest, HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { FilePickerAdapter } from 'ngx-awesome-uploader';
import { FilePreviewModelWithAuctionId } from './file-upload.model';
import { environment } from 'src/environments/environment';
export class DemoFilePickerAdapter {
constructor(private http: HttpClient) {
}
public uploadFile(fileItem: FilePreviewModel) {
const form = new FormData();
form.append('file', fileItem.file);
console.log("FILE OUTPUT");
console.log(fileItem.file);
const api = environment.api_url + "/fileupload";
const req = new HttpRequest('POST', api, fileItem, { reportProgress: true });
return this.http.request(req)
.pipe(
map((res: HttpEvent<any>) => {
if (res.type === HttpEventType.Response) {
return res.body.id.toString();
} else if (res.type === HttpEventType.UploadProgress) {
// Compute and show the % done:
const UploadProgress = +Math.round((100 * res.loaded) / res.total);
return UploadProgress;
}
})
);
}
}
应用程序.js
app.post("/api/fileupload", checkAuth, (req, res, next) => {
console.log("File Upload Section")
console.log(req.body)
blobService.createContainerIfNotExists('testcontainer', {
publicAccessLevel: 'blob'
}, function (error, result, response) {
if (!error) {
// if result = true, container was created.
// if result = false, container already existed.
}
});
blobService.createBlockBlobFromLocalFile('testcontainer', 'taskblob', req.body.file, function (error, result, response) {
if (!error) {
// file uploaded
}
});
});
文件预览模型
export interface FilePreviewModel {
fileId?: string;
file: File | Blob;
fileName: string;
}
FilePreviewModelWithAuctionId
export interface FilePreviewModelWithAuctionId {
fileId?: string;
file: File | Blob;
fileName: string;
auctionId: string;
}
由于找不到文件,您忘记指定内容类型。
将此标头添加到您的请求中。
let headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = { headers: headers, reportProgress: true };
const api = environment.api_url + "/fileupload";
const req = new HttpRequest('POST', api, form , options );
更新:
我没有看到您的服务器中也缺少 multipart/form-data 的处理程序。
按着这些次序:
npm install --save multer
在您的 nodejs 应用程序中导入multer:
const multer = require('multer');
const upload = multer({dest: 'public/uploads/'}).single('file');
修改您的端点:
app.post("/api/fileupload", checkAuth, upload, (req, res, next) => {
console.log(req.file);
...
}
您已经声明了一个表单,但它从未被使用过。 请尝试以下操作:
import { FilePreviewModel } from 'ngx-awesome-uploader';
import { HttpRequest, HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { FilePickerAdapter } from 'ngx-awesome-uploader';
import { FilePreviewModelWithAuctionId } from './file-upload.model';
import { environment } from 'src/environments/environment';
export class DemoFilePickerAdapter {
constructor(private http: HttpClient) {
}
public uploadFile(fileItem: FilePreviewModel) {
let form = new FormData();
form.append('file', fileItem.file);
console.log("FILE OUTPUT");
console.log(fileItem.file);
const api = environment.api_url + "/fileupload";
const req = new HttpRequest('POST', api, form , { reportProgress: true });
return this.http.request(req)
.pipe(
map((res: HttpEvent<any>) => {
if (res.type === HttpEventType.Response) {
return res.body.id.toString();
} else if (res.type === HttpEventType.UploadProgress) {
// Compute and show the % done:
const UploadProgress = +Math.round((100 * res.loaded) / res.total);
return UploadProgress;
}
})
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.