Angular:使用NodeJs API调用将文件上载到DB
我正在Angular开发一个应用程序,其中有一个带有文件上传的表单 但我无法正确检索所选图像的URL 后端服务已经过测试,工作正常Angular:使用NodeJs API调用将文件上载到DB,angular,Angular,我正在Angular开发一个应用程序,其中有一个带有文件上传的表单 但我无法正确检索所选图像的URL 后端服务已经过测试,工作正常 app.post('/invoice/add', upload.single('document'), async (req, res) => { const title = req.body.title const description = req.body.description const document = req.file
app.post('/invoice/add', upload.single('document'), async (req, res) => {
const title = req.body.title
const description = req.body.description
const document = req.file.path
const result = await addInvoice(title, description, document);
res.status(200).json(result)
})
对于前端,这是一种服务方式:
addInvoice(title, description, document): any {
const headers = new HttpHeaders({
'Content-Type': 'application/json'
});
return this.http
.post(this.uri + '/payment/addpayment', { title, description, document }, {headers})
.pipe(catchError(this.errorHandler));
}
组件ts文件调用:
document: File = null;
uploadUrl = 'http://localhost:3001/uploads//' + document;
处理更改方法:
handleChange(info: NzUploadChangeParam): void {
let fileList = [...info.fileList];
// 1. Limit the number of uploaded files
// Only to show two recent uploaded files, and old ones will be replaced by the new
fileList = fileList.slice(-2);
// 2. Read from response and show file link
fileList = fileList.map(file => {
if (file.response) {
// Component will show file.url as link
file.url = file.response.url;
}
return file;
});
this.fileList = fileList;
}
HTML:
证明
上传
我不知道如何处理这个问题,非常感谢您对此事的任何见解,谢谢
handleChange(info: NzUploadChangeParam): void {
let fileList = [...info.fileList];
// 1. Limit the number of uploaded files
// Only to show two recent uploaded files, and old ones will be replaced by the new
fileList = fileList.slice(-2);
// 2. Read from response and show file link
fileList = fileList.map(file => {
if (file.response) {
// Component will show file.url as link
file.url = file.response.url;
}
return file;
});
this.fileList = fileList;
}
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzFor="document" nzRequired>Proof</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-upload
[nzAction]="uploadUrl"
[nzFileList]="fileList"
(nzChange)="handleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
</nz-upload>
</nz-form-control>
</nz-form-item>