使用 Node.js 但不在浏览器上使用的库（ FileReader() 与 fs.readFileSync ）库：NBT.js

Question

基本上我使用这个 NBT 解析库将 .nbt 文件解析为可读的解码数据结构。

var fs = require('fs'),
    nbt = require('nbt');

var data = fs.readFileSync('z,nbt');
nbt.parse(data, function(error, data) {
    if (error) { throw error; }

    console.log(data.value); //This works, prints out my minecraft nbt array structure
});

当我在 Notepad++ 中查看文件 ("z.nbt") 时，它看起来像二进制字符串：

它在 NPM 上运行完美，我得到了我正在寻找的数据结构（使用上面的代码）

然而...

现在我正在使用 React 在 Web 上尝试它.. REACT 正在调用 nbt.js 的解析函数，但是解析器对浏览器的文件输入不起作用。（似乎导致某种逻辑错误，未定义索引）

我认为 FileReader() 的 readAsBinaryString 方法和 fs.readFileSync 方法有不同的输出字符串，NBT.js 更喜欢 fs.readFileSync，但是我试过 readAsText ()、readAsDataURL() 等...来自 FileReader 和 NBT.js 的方法无法解析任何这些输出。

我的 React 代码：

import React from 'react';
import {Container} from "react-bootstrap";
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle';
import nbt from '../nbt';

const Upload = () => {

    // handleUpload = (event) => {
    //     console.log('Success!');
    // }


    
    function handleChange(event) {
        console.log(event.target.files);
        // console.log(event.target.files[0]); //file struc
        const file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = (e) => {

            console.log(e.target.result);


            var x = nbt.parse(e.target.result, function(error, data) {
              if (error) { throw error; }
          
              console.log(data);
          });

        }
        reader.readAsBinaryString(file);
    }


  return (
    <Container>
    Input NBT file <br/>
    <input type="file" onChange={handleChange}></input>
    </Container>
  )
}

export default Upload

这是我在 React 中导入的 nbt.js 文件：nbt.js

Answer 1

reader.readAsBinaryString(file); 将其替换为 read.readAsArrayBuffer(file);

使用 Node.js 但不在浏览器上使用的库（ FileReader() 与 fs.readFileSync ）库：NBT.js

Library working with Node.js but not on Browser ( FileReader() vs. fs.readFileSync ) Lib: NBT.js

javascript

reactjs

decode

fs

filereader