使用Javascript和C# Web实现文件转二进制上传后下载损坏问题问询

问题根因 #

原有JS上传逻辑的核心错误是：将存储原始文件字节的Uint8Array直接转为逗号分隔的数字字符串传入JSON，后端再用UTF8编码将该字符串转为字节数组，完全破坏了原始文件的二进制结构，导致下载的文件格式损坏。原生ASP上传方案直接读取文件流的原始字节，因此可以正常打开。

修复方案 #

前端JS修改 #

1. 新增ArrayBuffer转Base64的工具方法，Base64是二进制数据通过JSON传递的标准兼容格式

function arrayBufferToBase64(buffer) {
    let binaryStr = '';
    const byteArray = new Uint8Array(buffer);
    for (let i = 0; i < byteArray.byteLength; i++) {
        binaryStr += String.fromCharCode(byteArray[i]);
    }
    return window.btoa(binaryStr);
}

2. 修改文件读取逻辑，直接存储Base64结果

var filename;
var contentType;
var fileBase64; // 替换原有字节数组变量

function showname() {
    const fileInput = document.getElementById('fileupload1');
    const selectFile = fileInput.files[0];
    filename = selectFile.name;
    contentType = selectFile.type;

    const reader = new FileReader();
    reader.readAsArrayBuffer(selectFile);
    reader.onload = function () {
        fileBase64 = arrayBufferToBase64(reader.result);
    };
}

3. 修改AJAX请求，用JSON.stringify统一序列化请求参数，避免手动拼接JSON的转义错误

$.ajax({
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    url: "confirmationcomplete.aspx/finish",
    data: JSON.stringify({
        id: events.id,
        contentType: contentType,
        name: filename,
        binaryy: fileBase64
    }),
    success: function (data) {
        alert('Success upload');
    },
    error: function (xhr, status, error) {
        alert(xhr.responseText);
    }
})

后端C#修改 #

将原有UTF8转字节的逻辑替换为Base64解码，即可得到和原生ASP上传完全一致的原始文件字节数组

// 替换原有 byte[] byteArray = Encoding.UTF8.GetBytes(binaryy);
byte[] byteArray = Convert.FromBase64String(binaryy);

修改完成后上传的文件即可和原生ASP上传效果完全一致，下载后可以正常打开。

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