Angular:使用NodeJs API调用将文件上载到DB

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

我正在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.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>