Question

我尝试base64编码本地文件。它位于我的.js文件旁边，因此无法上传。像this这样的解决方案（使用XMLHttpRequest）会产生跨站点脚本错误。

我正在尝试这样的事情（这不起作用，但它可能有助于解释我的问题）：

var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
   var res = e.target.result;
   console.log(res);
};
var f = reader.readAsDataURL(file);

任何人都有在本地这样做的经验吗？

Answer 1

像this这样的解决方案（使用XMLHttpRequest）可以获得跨站点脚本错误。

如果使用chrome或chromium浏览器，您可以启用--allow-file-access-from-files标记设置为允许使用XMLHttpRequest()或canvas.toDataURL()从本地文件系统请求资源。

您可以使用<img>元素，<canvas>元素.toDataURL()创建data URL本地图片文件，而无需使用XMLHttpRequest()

var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;
  ctx.drawImage(this, 0, 0);
  var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
  console.log(res);
}
img.src = file;

您可以使用Convert local image to base64 string in Javascript中描述的XMLHttpRequest()。

另见How to print all the txt files inside a folder using java script。

有关两种方法中返回的data URI差异的详细信息，请参阅canvas2d toDataURL() different output on different browser

正如@Kaiido在comment下面所述

它会首先解码它，在这个阶段它仍然是你的文件，然后它将它绘制到画布上（现在它只是原始像素），最后是它将重新编码它（它与您的原始文件无关再检查一下dataURI字符串...他们强制性地不同而且即使你从两个不同的浏览器进行画布操作，你会有不同的输出，而FileReader总会给你相同的输出，因为它直接编码文件，它不解码它

JS：如何在没有XMLHttpRequest的情况下base64编码本地文件？

1 个答案: