如何使用 p5js 读取具有自定义扩展名的文本文件答案

【问题标题】：How can I read a text file with a custom extension using p5js如何使用 p5js 读取具有自定义扩展名的文本文件
【发布时间】：2022-12-25 03:22:37
【问题描述】：

我想使用 p5js 从磁盘加载自定义扩展的文本文件，最好使用 createFileInput()。我可以使用 createWriter() 保存给定自定义扩展名的文本文件，然后我可以在我的默认记事本上毫无问题地访问和阅读它。我遇到的问题是在尝试使用createFileInput() 加载所述文本文件时发生的，这会导致文件类型为""，而不是所需的"text"。例如，

function setup() {
  load = createFileInput(loadFile)
  noCanvas();
  let content = 'Hello World';
  let writer = createWriter('saveFile.ctxt');
  writer.write([content]);
  writer.close();
}

function loadFile(file) {
  console.log(file.type, file.data);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

加载saveFile.ctxt时输出"" data:application/octet-stream;base64,SGVsbG8gV29ybGQ=，完全看不懂。

无论使用何种自定义文件扩展名，所需的输出都是 "text" Hello World。

【问题讨论】：

标签： javascript upload p5.js

【解决方案1】：

您可以使用 FileReader 和 FileReader.readAsText() 方法，注意将 p5.js 回调中的 file.file 传递给它。

file.file 是“底层File 对象。所有正常的File 方法都可以在此调用”。

let fileInput;

function setup() {
  noCanvas();
  noLoop();

  // Used to create the file:
  // (probably won't work in Stack Snippet)
  //const writer = createWriter("saveFile.ctxt");
  //writer.write(["Hello World"]);
  //writer.close();

  fileInput = createFileInput(file => {
    const reader = new FileReader();
    reader.onload = e => {
      console.log(e.target.result); // => Hello World
    };
    reader.readAsText(file.file);
  });
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"&gt;&lt;/script&gt;

如果您要将 .txt 文件传递给输入，file.data 将已经有结果文本，而不需要 FileReader。

【讨论】：