Question

我正在使用Angle6作为前端并使用nodejs 10作为后端来构建MEAN应用。我必须从angular调用一个具有2个文件作为参数的api。现在，我使用一项服务来调用在nodejs中开发的其他api并进行表达，它们可以正常工作。我不知道如何传递文件，因为<input type=file>标记传递的路径到达api时具有伪路径。这是express-nodejs中的代码

router.post('/multi/:token', (req, res) => {
    token = req.params.token;
    body = req.body;

    const f1 = body.config;

    const f2 = body.payload;    

    const options2 = {
        method: 'POST',
        url: ionapi.iu + '/' + ionapi.ti + endpointMessage,
        headers: {
            'authorization': "Bearer " + token,
            'content-type': 'application/json'
        },
        formData:{
        ParameterRequest : fs.createReadStream(f1),
        MessagePayload : fs.createReadStream(f2)
            },
        rejectUnauthorized: false,
        mess: true  
    };

    return requestPromise(options2)
    .then(body => res.status(200).send(JSON.stringify(body)))
    .catch(error => res.status(500).send(error))

});

这是打字稿中的角度代码

service.ts

// Post a multipart message
postImsMultiPart(token, imsMessage) {
  return this._http.post<any>('/api/multi/' + token, imsMessage)
    .pipe(catchError(this.errorHandler));
}

其中imsMessage是如下对象

imsMessage: IimsMessage = {config: '', payLoad: ''};

配置和有效负载包含我在以下组件中使用输入type = file HTML标签选择的文件的文件名

component.html

  <form  #imsMessForm="ngForm" (ngSubmit)="PostMessage()" novalidate>

      <div class="row d-flex justify-content-between align-items-center">

        <div class="form-group col-xs-6">
            <label for="filejson" class="mr-3">Config json file</label>
            <input  #myFileJson="ngModel" 
                    type="file" 
                    name="filejson" 
                    [(ngModel)]="imsMessage.config" 
                    (change)="checkFileJson($event)"
                    accept="application/json" 
                    required/>    
            <div class="text-center" [class.alert-danger]="fileTypeJsonMess">
                {{fileTypeJsonMess}}
            </div>                    
        </div>
        <div class="form-group col-xs-6">
            <label for="filejson" class="mr-3">Payload xml file</label>
            <input #myFileXml="ngModel" type="file" name="filexml" [(ngModel)]="imsMessage.payLoad" (change)="checkFileXml($event)" required/>   
            <div class="text-center" [class.alert-danger]="fileTypeXMLMess">
                {{fileTypeXMLMess}}
            </div>                         
        </div>
      </div>
      <div class="row">
          <div class="form-group col-md-12" align="center">
              <button class="btn btn-primary"type="submit" [disabled]="!imsMessForm.form.valid || !fileJsonOK || !fileXmlOK">Post Message</button>  
          </div>
      </div>
  </form>

component.ts

PostMessage() {
  this._ims.postImsMultiPart(this.imsToken.access_token, this.imsMessage).subscribe(
    res => {
      console.log('PM ok ', res);
    },
    error => {
      console.log('PM ko', error);
    });
}

在MEAN应用中使用文件作为参数调用api

0 个答案: