将二进制值分配给 dom.value答案

【问题标题】：Assigning binary values to dom.value将二进制值分配给 dom.value
【发布时间】：2020-11-12 00:44:12
【问题描述】：

当我将解码的 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 值不一样，但有些是！

【问题讨论】：

因为TextDecoder 不会抛出，尽管您的 arrayBuffer 包含无效/格式错误的数据。而在另一端TextEncoder 确实不会生成格式错误的数据。你想在这里做什么？为什么要将二进制数据写入文本？-field.
文件本身的本质是什么？是文字吗？
@Pointy accept=".obj,.mtl,.jpg,.png,.fbx" 不太可能
TextEncoder 与 TextDecoder 不完全相反
对，而且你不能指望二进制文件格式是有效的 UTF-8 代码序列。

标签： javascript binary decode encode arraybuffer

【解决方案1】：

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

【讨论】：

"在将二进制值解码为 UTF-8 时丢失了一些信息" 不，这更像是我告诉你阅读这段英文文本，然后我给你一个摘自一本中文食谱（不是英文）。然后我告诉你写下你读过的词，想知道为什么它和原来的不一样。