使用 Jquery 从本地文件路径 (Windows) 获取 base64答案

【问题标题】：Get base64 from local file path (Windows) with Jquery使用 Jquery 从本地文件路径 (Windows) 获取 base64
【发布时间】：2019-05-17 07:27:37
【问题描述】：

我需要获取图像文件的 base64。

我得到的只是文件的本地文件路径，如下所示：C:\APPL\scans\IMG555.jpg

我尝试了这段代码，但似乎不起作用。

var name = 'IMG555.jpg';
var path = '`C:\APPL\scans\';

export const fileToBase64 = (filename, filepath) => {
  return new Promise(resolve => {
    var file = new File([filename], filepath);
    var reader = new FileReader();
    // Read file content on file loaded event
    reader.onload = function(event) {
      resolve(event.target.result);
    };

    // Convert data to base64 
    reader.readAsDataURL(file);
  });
};

fileToBase64(name , path).then(result = {
  console.log(result);
});

我只得到 base64 的一部分（小长度）。所以，它不是一个有效的图像文件。

有人有更好的方法吗？

【问题讨论】：

您是在 nwjs 或 electron 之类的环境中，还是用户可以通过拖放或<input type="file" /> 选择该文件？否则，出于安全原因，您将无法从用户磁盘中读取任何文件。
另外，path 字符串的开头有一个反引号，它可能不应该存在。
你的密码好像无效！

标签： javascript jquery base64 filepath

【解决方案1】：

在浏览器环境中，出于安全原因，您不能只从磁盘读取任何文件。用户必须明确选择一个文件，例如使用<input type="file" />。

这是一个简单的示例，它在 textarea 中显示所选文件的 base64 表示。您不需要 jQuery 来执行此操作。

function showBase64Representation() {
  var output = document.querySelector('textarea');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    output.value = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

<input type="file" onchange="showBase64Representation()"><br>
<textarea rows="10" cols="50"></textarea>

【讨论】：