Javascript 中的数据 URI 到 JSON？

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 采用 Base64 编码的 JSON。有两个步骤：解码 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>轴：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>