0

我正在使用带有 OPEN API 3.0 的 Mock Server 来模拟数据和期望。我需要根据给定的示例使用 Mock Server 获取虚拟图像：

https://www.mock-server.com/mock_server/getting_started.html#button_response_literal_binary_PNG_body

我的 swagger/Open API swagger 编辑器的函数定义如下：

/geo/{geo-id}:
    get:
      description: Geographic information
      tags: [caseload]
      parameters:
      - in: path
        name: geo-id
        required: true
        schema:
          type: string
      responses:
        '200':
          description: >
            Sample geographic map image in PNG format
          content:
            image/png:
              schema:
                type: string
                format: binary

使用上面链接中提供的示例 REST API 示例，我创建了自己的模拟数据期望 CURL 请求，例如：

curl -v -X PUT "http://localhost:1080/mockserver/expectation" -d '{
  "id": "geo-map",
  "httpRequest": {
    "method" : "GET",
    "path": "/geo/geoid-map"
  },
  "httpResponse": {
    "statusCode": 200,
    "headers": {
      "content-type": ["image/png"],
      "content-disposition": ["form-data; name=\"test.png\"; filename=\"test.png\""]
    },
    "body": {
      "type": "BINARY",
      "base64Bytes": "iVBORw0KGgoAAAANSUhEUgAAAqwAAAApCAIAAAB/QuwlAAAK+GlDQ1BJQ0MgUHJvZmlsZQAASA2tl3dcU8kWx+fe9EYLICAl9CZIr9JrAAXpYCMkgYQSYgoCVpTFFVwLKiKgrugiiIJrAWQtiAULoljAvkEWFXVdLIiKypvAEvfzPm//e5PP3Pne35w598zcmXzOBYBGZQmFWagKANkCiSg6xJ+RmJTMIDwGWKAF8EAf2LHYYqFfVFQE+NfyoRcg8s5bNnJf/2r2vztUOVwxGwAkCnancsTsbMjHYH3PFookAGDqoG68RCKUcxdkdREMELJMzumT/F7OqROMJU7YxEYHAIDVBYBIZbFE6QBQLaDOyGWnQz/UUMh2Ag5fADkPsjebx+JAboU8Izs7R85/QLZI/Yef9H8wi5Wq8MlipSt4ci5wJHxwIF8szGLlT9z8Py/ZWVK4XhPFEF6pPFFoNGwT4ZpVZ+aEK1iQOidySufDGU0xTxoaN8VscQBcy8mxHFZg+BRLM+P8ppglgvS3DV/CjJ1iUU60wr8ga458f0zEwOMyFcwVB8VM6Wn8YOYUF/BiE6Y4lx8/Z4rFmTGKGAp4AQpdJI1WxJwmClbMMVsMR/79XDbr+7MkvFj5O56Ih8MNDJpiriBOEY9Q4q/....[trimmed]
    }
  }
}'

现在，当我在邮递员上执行请求端点时，

http://localhost:1080/geo/geoid-map，我成功地获取了图像。但是在我的 react web 应用程序上尝试相同的操作时，API 返回的响应会产生控制台响应：

axios.response

在展开 时response.data，它会显示类似于以下内容的二进制数据：

在此处输入图像描述

将此二进制图像传递给 reactsrc无法显示图像。

即使在遵循配置之后，如如何在 reactjs 中将二进制数据转换为图像以及如何在 React 中将二进制数据显示为图像中所建议的那样？， 这没用。

任何有关相同的帮助表示赞赏

4

0 回答 0