使用 FileReader API答案

【问题标题】：Using the FileReader API使用 FileReader API
【发布时间】：2018-06-23 13:01:10
【问题描述】：

我正在尝试使用 FileReader API 读取本地静态文件，但由于某种原因它没有读取任何内容。我正在使用：

var file = new File(
  [""],
  "config.toml"
);
var reader = new FileReader();
reader.onload = event => {
  console.log(reader.result);
};
reader.readAsText(file);

结果只是空的。我究竟做错了什么？另外，Javascript 怎么知道去哪里寻找 config.toml？

编辑：为了澄清，我想从托管应用程序的服务器读取文件，而不是从客户端计算机。

【问题讨论】：

你说的是本地的。通常，浏览器安全会阻碍这一点。您是否在开发者工具中看到安全错误？

标签： javascript reactjs file yarnpkg

【解决方案1】：

在您的代码中，您使用的是File 构造函数，该构造函数返回一个新构造的文件，其中参数如下：

var myFile = new File(bits, name[, options]);

bits ArrayBuffer、ArrayBufferView、Blob 或 DOMString 对象的数组 — 或任何此类对象的混合。这是编码为 UTF-8 的文件内容
name 表示文件名或文件路径的 USVString

它确实从您提供的路径中读取文件。所以它会读取你传递给它的内容，而你传递给它的是一个空字符串。

如果您想从文件系统中读取文件，您需要使用 input 元素并将 type 属性设置为 file 并浏览它。

以下是如何使用 FileReader api 读取图像的示例：

function handleFileSelect(evt) {
	var files = evt.target.files;

	// Loop through the FileList and render image files as thumbnails.
	for (var i = 0, f; f = files[i]; i++) {

	// Only process image files.
	if (!f.type.match('image.*')) {
		continue;
	}

	var reader = new FileReader();

	// Closure to capture the file information.
	reader.onload = (function(theFile) {
		return function(e) {
			// Render thumbnail.
			var span = document.createElement('span');
			span.innerHTML = [
				'<img class="thumb" src="', 
				e.target.result,
				'" title="', 
				escape(theFile.name), 
				'"/>'
			].join('');
			document.getElementById('list').insertBefore(span, null);
		};
	})(f);

	// Read in the image file as a data URL.
	reader.readAsDataURL(f);
	}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

【讨论】：

如何以编程方式完成所有操作？我不想从用户那里获取文件名。我只想读取一个预先存在的文件。
想象一个可以使用 javascript 从用户文件系统读取文件的网页。你不认为这会是一个安全问题吗？我不认为这是可能的。
请看我的编辑。我不想从客户端机器上读取文件。我想从托管应用程序的服务器读取它。
Javascript 在客户端浏览器上运行，因此它对服务器文件系统一无所知。如果您想从服务器读取文件，服务器需要能够将文件提供给客户端，那么您在问题中提供的 js 代码不适用于它
但是您希望如何在没有服务器的情况下在 Web 环境中提供文件？