javascript - 将二进制值分配给 dom.value

Question

当我将解码的 ArrayBuffer 分配给 dom.value 然后再次对其进行编码时，我没有得到相同的 ArrayBuffer。在下面的示例中，A 是“ArrayBuffer { byteLength: 394924 }”，而 B 是“ArrayBuffer { byteLength: 585517 }” ???? 为什么 ？

Fbx 是 Autodesk 的 3D 模型文件格式。它是二进制的，而不是文本的。我想在模型上传之前将模型加载到预览器中，就在本地客户端 Web 浏览器站点上。

html

<input id="fileUploadInput" type="file" accept=".fbx"/>

Javascript

let _handleFileSelect = function ( event ) {

    let reader = new FileReader();
        
    let files = {... event.target.files};
    let file = files[0]; 
    reader.readAsArrayBuffer(file);
    reader.onload = (function(reader) {
        return function() {

            let fbxBuffer = reader.result;

            console.log("A", fbxBuffer);

            let dec = new TextDecoder();
            document.getElementById('fbxFileInput').value = dec.decode(fbxBuffer);


             let v = document.getElementById('fbxFileInput').value;

             let enc = new TextEncoder();   
  
            console.log('B', (enc.encode(v)).buffer);
        }
    }
        
        
var multipleFilesInputElem = document.getElementById( 'fileUploadInput' );
multipleFilesInputElem.addEventListener( 'change' , _handleFileSelect, false);

问题可以总结为：“为什么A和B不一样？”

console.log('A', fbxBuffer);

console.log('B', (new TextEncoder().encode(new TextDecoder().decode(fbxBuffer))).buffer);

有些 ArrayBuffer 值不一样，但有些是！

标签： javascriptbinarydecodeencodearraybuffer

Answer 1

从定义上看，这个问题似乎是不恰当的。正如 Pointy 所说，在将二进制值解码为 UTF-8 时会丢失一些信息，因此不可能再次将 UTF-8 反转为 ArrayBuffer 二进制值。有效的二进制部分只是那些引用文本值的部分。