p5.js如何通过createFileInput读取自定义扩展名文本文件

使用p5.js的createFileInput()加载本地自定义扩展名文本文件时，存在以下现象：

• 可通过createWriter()正常生成自定义后缀（如.ctxt）的文本文件，文件可被系统记事本正常打开读取
• 加载这类自定义后缀文件时，返回的文件对象type属性为空字符串""，而非预期的"text"
• 返回的data为data:application/octet-stream;base64,xxx格式的base64编码内容，无法直接获取可读文本
• 预期目标：无论文件扩展名是什么，加载后都能直接获取可读纯文本内容

复现代码 #

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);
}

对应p5.js引入标签：

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

运行上述代码，加载生成的saveFile.ctxt文件时，控制台输出为"" data:application/octet-stream;base64,SGVsbG8gV29ybGQ=，不符合预期。

浏览器无法识别自定义扩展名对应的MIME类型，会默认将这类文件归类为application/octet-stream二进制流。p5.js的createFileInput()默认根据浏览器返回的MIME类型决定读取格式，遇到未知类型时会按二进制读取，返回base64编码的DataURL，不会自动解析为文本。

不要依赖p5.js的自动类型判断，手动指定读取格式为纯文本即可兼容任意扩展名的文本文件，优先使用以下方案：

• 在createFileInput的回调中，获取p5封装对象里的原生File实例（存放在file.file属性）
• 用原生FileReader强制以utf-8文本格式读取文件，完全跳过MIME类型校验，直接拿到可读内容

修正后完整代码 #

function setup() {
  createFileInput(loadFile);
  noCanvas();
  // 测试用自定义扩展名文件保存逻辑
  let content = 'Hello World';
  let writer = createWriter('saveFile.ctxt');
  writer.write([content]);
  writer.close();
}

function loadFile(file) {
  if (!file) return;
  const reader = new FileReader();
  // 强制按UTF-8文本格式读取，忽略文件MIME类型
  reader.readAsText(file.file, 'utf-8');
  reader.onload = (e) => {
    const textContent = e.target.result;
    // 此处输出即为预期的 "text" + 可读文本结果
    console.log("text", textContent);
  }
}

如果需要兼容现有逻辑，不想改写读取流程，也可以对p5返回的base64数据做解码：

function loadFile(file) {
  let textContent;
  if (file.type === 'text') {
    textContent = file.data;
  } else {
    // 截取base64内容段解码
    const base64Part = file.data.split(',')[1];
    textContent = atob(base64Part);
  }
  console.log("text", textContent);
}

注意：如果文本包含中文等非ASCII字符，必须使用第一种FileReader方案，指定utf-8编码可避免乱码；atob()仅支持ASCII字符，处理非英文内容会出现乱码。

内容的提问来源于stack exchange，提问作者Tomo