Javascript 中 JSON 的数据 URI？

Question

我遇到一个问题，我的服务器应用程序获取 JSON 的 DataURI，我想再次将其解析为 JSON。我怎么能这样做？我尝试了不同的东西，但似乎没有任何效果。我尝试简单地解析它或 encodeURI(data); 但我仍然无法获得原始 JSON.

这是数据 URI： data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=

我也试过这样编码：

var data = 'data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=';
Buffer.from(data.toString('utf8'), 'base64').toString('ascii')

但是如果我在控制台上登录，我会得到这个：u+Zje F- J'm+k0P"&VGEwGR#"&Fvr"@P"&VGEvFF#"%vwrBR"FVw7BFW&R$r P'

Answer 1

数据 URI JSON 以 Base64 编码。这有两个步骤：

解码Base64（例如，使用atob函数），以及
解析结果JSON

例如（在浏览器上）：

const dataURI = "data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=";

// 29 = length of "data:application/json;base64,"
const json = atob(dataURI.substring(29));
const result = JSON.parse(json);
console.log(result);

我在你的问题中使用 Buffer 表明你可能正在使用 Node.js。如果是这样，您会将对 atob 的调用替换为 Buffer.from(data, 'base64').toString():

const dataURI = "data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=";

// 29 = length of "data:application/json;base64,"
const json = Buffer.from(dataURI.substring(29), "base64").toString();
const result = JSON.parse(json);
console.log(result);

Answer 2

如果您不介意将上下文更改为异步上下文，您可以使用 fetch() 来解析资源。 fetch() 通常与 URL 一起使用，但也适用于数据 URI（在大多数浏览器中）。

const dataURI = "data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=";

(async function () {
  const response = await fetch(dataURI);
  const data = await response.json();
  console.log(data);
})();

如果您已经在使用库来简化网络请求，您也可以使用它们。

示例：

jQuery:

const dataURI = "data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=";

(async function() {
  const data = await $.getJSON(dataURI);
  console.log(data);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

axios:

const dataURI = "data:application/json;base64,ew0KICAgICJtYWx0X3R5cGUiOiAibG9nIiwNCiAgICAibWFsdF9kYXRhIjogIldvdywgdSByIGFsbW9zdCB0aGVyZSA6TyINCn0=";

(async function() {
  const response = await axios.get(dataURI);
  console.log(response.data);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"></script>

Javascript 中 JSON 的数据 URI？

Data URI to JSON in Javascript?

javascript

json

data-uri