TypeScript React组件中Fetch POST传文件到OGRE API报错排查

背景 #

• 需求：通过Fetch向OGRE API发送GML文件，将其转换为GeoJSON
• API说明：转换请求需发送POST到http://ogre.adc4gis.com/convert，核心参数包括：
  • upload：待上传的文件（必填）
  • sourceSrs（可选）：原始坐标系
  • targetSrs（可选）：目标坐标系

现有代码（TypeScript React） #

useEffect(() => {
    const url = 'http://ogre.adc4gis.com/convert'

    const sourceSrs = 'EPSG:25833'
    const targetSrs = 'EPSG:4326'

    const sourceData = `
    <wfs:FeatureCollection xmlns:wfs="http://www.opengis.net/wfs/2.0" xmlns:gml="http://www.opengis.net/gml/3.2" xmlns:fis="http://www.berlin.de/broker" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" numberMatched="403860" numberReturned="1" timeStamp="2023-04-11T11:16:20.275" xsi:schemaLocation="http://www.berlin.de/broker https://fbinter.stadt-berlin.de/fb/wfs/data/senstadt/s_wfs_alkis?REQUEST=DescribeFeatureType&SERVICE=WFS&VERSION=2.0.0&TYPENAMES=fis:s_wfs_alkis http://www.opengis.net/wfs/2.0 http://schemas.opengis.net/wfs/2.0/wfs.xsd http://www.opengis.net/gml/3.2 http://schemas.opengis.net/gml/3.2.1/gml.xsd">
      <wfs:boundedBy>
      <gml:Envelope>
      <gml:lowerCorner>375161.4919999996 5824742.937999999</gml:lowerCorner>
      <gml:upperCorner>375193.1490000002 5824777.863</gml:upperCorner>
      </gml:Envelope>
      </wfs:boundedBy>
        <wfs:member>
          <fis:s_wfs_alkis gml:id="s_wfs_alkis.1">
          <fis:bezeich>AX_Flurstueck</fis:bezeich>
          <fis:afl>603.0</fis:afl>
          <fis:fsko>11001000400752____</fis:fsko>
          <fis:zae>752</fis:zae>
          <fis:nen/>
          <fis:gmk>0010</fis:gmk>
          <fis:namgmk>Spandau</fis:namgmk>
          <fis:fln>4</fis:fln>
          <fis:gdz>11000005</fis:gdz>
          <fis:namgem>Spandau</fis:namgem>
          <fis:zde/>
          <fis:dst>1119</fis:dst>
          <fis:beg>2018-04-03T09:13:44</fis:beg>
          <fis:statusdat>2022-01-03T19:46:31</fis:statusdat>
          <fis:uuid>DEBE00YYCW00003I</fis:uuid>
            <fis:geom>
              <gml:MultiSurface gml:id="P1">
                <gml:surfaceMember>
                  <gml:Polygon gml:id="P2">
                    <gml:exterior>
                      <gml:LinearRing>
                      <gml:posList count="7">375179.9210000001 5824742.937999999 375161.4919999996 5824744.664999999 375164.86400000006 5824752.975 375174.38100000005 5824773.363 375176.4879999999 5824777.863 375193.1490000002 5824770.038000001 375179.9210000001 5824742.937999999</gml:posList>
                      </gml:LinearRing>
                    </gml:exterior>
                  </gml:Polygon>
                </gml:surfaceMember>
              </gml:MultiSurface>
            </fis:geom>
          </fis:s_wfs_alkis>
        </wfs:member>
    </wfs:FeatureCollection>
    `

    async function convertString() {
      const file = new Blob([sourceData], { type: 'application/xml' })
      const data = new FormData()
      data.append('data', file, 'testfile.gml')

      const params = new URLSearchParams({
        sourceSrs : sourceSrs,
        targetSrs : targetSrs,
        upload: 'testfile.gml',
      })
      const request = `${url}?${params}`
      console.log('DEBUG REQUEST', request)
      const response: Response = await fetch(request, {
        method: 'POST',
        body: data,
      })

      const queryResult = await (await response.blob()).text()
      setResult(queryResult)
    }

    if (!result) {
      convertString()
    }
  }, [bbox])

错误信息 #

{"error":true,"message":"Unexpected field"}

问题原因与修正方案 #

核心问题 #

1. FormData字段名不匹配：OGRE API要求上传文件的字段名为upload，但代码中用了data，这是导致"Unexpected field"错误的直接原因。
2. 冗余的URL参数：upload参数不需要放在URL查询参数中，文件已经通过FormData在请求体中上传。

修正后的代码片段 #

async function convertString() {
  const file = new Blob([sourceData], { type: 'application/xml' })
  const data = new FormData()
  // 修正：将字段名改为API要求的"upload"
  data.append('upload', file, 'testfile.gml')
  // 可选：将sourceSrs、targetSrs也放入FormData，或保留在URL参数中
  data.append('sourceSrs', sourceSrs)
  data.append('targetSrs', targetSrs)

  // 直接使用基础URL即可，参数全部放在FormData中
  const request = url
  console.log('DEBUG REQUEST', request)
  const response: Response = await fetch(request, {
    method: 'POST',
    body: data,
  })

  const queryResult = await response.text()
  setResult(queryResult)
}

补充说明 #

• 参数传递方式：sourceSrs和targetSrs既可以放在URL查询参数中，也可以放入FormData里，两种方式OGRE API都支持，选择一种保持统一即可。
• 响应处理：可以直接用response.text()替代两次await的写法，简化代码。

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