Angular 6 使用 HttpClient 提交 XML 文件技术咨询

你的当前代码存在几个关键问题，导致无法正确提交XML数据，我来帮你修正并说明正确的实现方式：

现有代码的问题 #

• 数据格式不匹配：你传递的是JSON对象 postedData，但请求头设置了 Content-Type: text/xml，服务器会收到JSON格式的内容，却按照XML去解析，必然报错。
• httpOptions引用不完整：代码里的 httpOpt... 是未完成的写法，应该完整引用定义好的 httpOptions。
• 缺少必要的响应头配置：建议添加 Accept 头，告诉服务器你期望接收XML格式的响应（根据实际需求调整）。

正确实现步骤 #

1. 准备XML转换工具（如果是从JSON生成XML）

Angular没有内置JSON转XML的工具，我们可以用xml-js这个轻量级库来完成转换：

npm install xml-js --save

2. 修改ApiService代码

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { convert } from 'xml-js';

// 完善请求头配置
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'text/xml',
    'Accept': 'application/xml' // 根据服务器要求调整，比如也可以是text/xml
  })
};

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) { }

  postXmlData() {
    // 原始业务数据（JSON格式）
    const postedData = { userid: 1, title: 'title here', body: 'body text' };
    
    // 将JSON转换为XML字符串
    // compact: true 会生成紧凑的XML结构，spaces:2 用于格式化输出（可选）
    const xmlData = convert(postedData, { compact: true, spaces: 2 });
    
    // 提交XML数据到接口
    return this.http.post('你的API地址', xmlData, httpOptions);
  }
}

3. 特殊情况：如果需要自定义XML结构

如果服务器要求特定的XML节点结构（比如必须有根节点<request>），你可以手动构建XML字符串，避免转换库的自动结构不符合要求：

const xmlData = `
<request>
  <userid>${postedData.userid}</userid>
  <title>${postedData.title}</title>
  <body>${postedData.body}</body>
</request>
`;

4. 如果是上传本地XML文件

如果你的需求是上传用户选择的本地XML文件，而不是生成XML，需要使用FormData：

uploadXmlFile(file: File) {
  const formData = new FormData();
  formData.append('xmlFile', file); // 'xmlFile'是后端接口接收文件的字段名

  // 注意：上传文件时不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头
  const uploadOptions = {
    headers: new HttpHeaders({
      // 这里可以添加其他自定义头，比如Authorization
    })
  };

  return this.http.post('你的文件上传接口', formData, uploadOptions);
}

使用示例 #

在组件中调用服务并处理响应：

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="submitXml()">提交XML数据</button>`
})
export class AppComponent {
  constructor(private apiService: ApiService) {}

  submitXml() {
    this.apiService.postXmlData().subscribe(
      response => console.log('提交成功:', response),
      error => console.error('提交失败:', error)
    );
  }
}

内容的提问来源于stack exchange，提问作者user9273032