如何将System.Byte[]转换为HTML Input type="file" 实现文件持久化

嘿，这个问题我之前踩过坑！首先得明确一点：浏览器出于安全限制，是不允许直接通过后端或者JS给input type="file"赋值的——要是能随便设置这个字段，恶意网站岂不是能偷偷读取用户本地文件了？所以你想直接把Byte[]转成file input的已上传状态，这条路走不通，得换个思路。

下面给你两个可行的解决方案，按需选择：

方案一：后端临时存储文件（推荐，适合大文件） #

这个方法是目前最稳妥的，核心思路是把用户第一次上传的文件暂存起来，页面重载后通过唯一标识取回文件，不用用户重新上传：

• 当用户第一次提交表单且文件上传成功时，后端把文件存到临时目录（或者用内存缓存、数据库临时表），同时生成一个唯一ID（比如GUID）
• 把这个唯一ID、文件名存到你的ViewModel里（不用存Byte[]），返回给前端
• 前端页面上，保留原来的input type="file"，但额外加一个显示区域（比如<p>已上传：@Model.FileName</p>），再放一个隐藏的input字段存储这个唯一ID
• 当验证错误返回页面时，前端显示已上传的文件名，隐藏字段带着ID一起提交；后端处理时，如果拿到这个ID，就从临时存储里取出对应的文件，不用再读取file input的内容

举个后端代码的简化例子：

// 处理上传逻辑
if (model.FileInput != null && model.FileInput.ContentLength > 0)
{
    var tempFileId = Guid.NewGuid().ToString();
    var tempFilePath = Path.Combine(Server.MapPath("~/TempFiles"), tempFileId);
    // 保存文件到临时目录
    model.FileInput.SaveAs(tempFilePath);
    
    // 把标识存到ViewModel，传给前端
    model.TempFileId = tempFileId;
    model.UploadedFileName = model.FileInput.FileName;
}

// 验证失败返回页面时，ViewModel带着TempFileId和UploadedFileName

前端View的简化代码：

<input type="file" name="FileInput" />
@if (!string.IsNullOrEmpty(Model.UploadedFileName))
{
    <p>已上传文件：@Model.UploadedFileName</p>
    <input type="hidden" name="TempFileId" value="@Model.TempFileId" />
}

后续提交时，后端先判断TempFileId是否存在，存在就从临时目录读取文件，完成业务逻辑后记得清理临时文件（比如定时任务删除过期的临时文件）。

方案二：前端用Base64模拟已上传（适合小文件） #

如果你的文件体积不大（比如几MB以内），可以把Byte[]转成Base64字符串，在前端生成File对象，模拟已上传状态：

后端处理 #

把Byte[]转成Base64，同时保存文件名和MIME类型：

if (campo.HttpPostedFile != null)
{
    using (var reader = new BinaryReader(campo.HttpPostedFile.InputStream))
    {
        viewModel.FileByteArray = reader.ReadBytes(campo.HttpPostedFile.ContentLength);
        // 转成Base64字符串
        viewModel.FileBase64 = Convert.ToBase64String(viewModel.FileByteArray);
        viewModel.UploadedFileName = campo.HttpPostedFile.FileName;
        viewModel.FileContentType = campo.HttpPostedFile.ContentType;
    }
}

前端处理 #

页面加载时，用Base64生成File对象，赋值给file input：

<input type="file" id="fileUpload" name="campo.HttpPostedFile" />

@if (!string.IsNullOrEmpty(Model.FileBase64))
{
    <p>已上传：@Model.UploadedFileName</p>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileInput = document.getElementById('fileUpload');
            const base64Str = '@Model.FileBase64';
            const fileName = '@Model.UploadedFileName';
            const contentType = '@Model.FileContentType';

            // 解码Base64为字节数组
            const byteChars = atob(base64Str);
            const byteNumbers = new Array(byteChars.length);
            for (let i = 0; i < byteChars.length; i++) {
                byteNumbers[i] = byteChars.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            
            // 创建Blob和File对象
            const blob = new Blob([byteArray], { type: contentType });
            const file = new File([blob], fileName, { type: contentType });
            
            // 赋值给file input
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            fileInput.files = dataTransfer.files;
        });
    </script>
}

⚠️ 注意：这个方法有局限性——Base64会让文件体积增加约30%，大文件会导致页面加载变慢；另外部分旧浏览器可能不支持DataTransfer或File构造函数。

总结 #

如果是处理大文件，优先用方案一的临时存储法，稳定且符合安全规范；小文件可以试试方案二，实现起来更直接。

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