This issue is related to a ***No Javascript Framework*** SPFx webpart with RestAPI on Sharepoint 2019. The webpart contains a 'text' and 'file upload' fields. The aim is to fill in the text field, select a file to upload and click "Submit" button. The text field column value is unique and need to map to the uploaded file, so an Attachment to the List item was considered easier but the process is failing. 

Please help with the method shown below:

    	

    <input type="text" id="idTitle" name="Title" placeholder="Serial Number."><br />  
    <input id="upload" type="file"/><br />  
    <button class="create-Button ${styles.button}" ><span class="${styles.label}">Submit Order</span></button>

    SaveItem(): void { 
    var newfileName = document.getElementById('upload').files[0].name;
    
    const body: string = JSON.stringify({ 
            'Title': document.getElementById('idTitle')["value"],  
          });  
      this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items`, 
          SPHttpClient.configurations.v1, 
          { 
      headers: { 
      'Accept': 'application/json;odata=nometadata', 
      'Content-type': 'application/json;odata=nometadata', 
      'odata-version': ''
            },
     this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${this.Listname}')/items({item_id})/AttachmentFiles/ add(FileName='{newfileName}')`, 
          SPHttpClient.configurations.v1, 
          { 
      headers: { 
      Authorization: "Bearer " + accessToken
    Content-Length: {length of request body as integer}
    X-RequestDigest: "{form_digest_value}"
            },		
      	 	
      body: body 
          }) 
          .then((response: SPHttpClientResponse): Promise<IListItem>=> { 
      return response.json(); 
          })