如何在Razor控制器中获取JS创建的图片字节数组？

前端修改：通过FormData提交文件 #

你当前用URL.createObjectURL(file)仅实现了前端图片预览，要把文件传到后端，需将用户选择的file对象放入FormData提交：

// 假设用户选择文件的input是<input type="file" id="imageInput">
const fileInput = document.getElementById('imageInput');
const file = fileInput.files[0];

if (file) {
    // 保留你的前端预览逻辑
    const image = document.createElement('img');
    image.src = URL.createObjectURL(file);
    document.body.appendChild(image);

    // 准备FormData并提交
    const formData = new FormData();
    formData.append('uploadedImage', file); // 键名需和后端对应

    // 用fetch提交（或XMLHttpRequest）
    fetch('/YourPageName?handler=UploadImage', {
        method: 'POST',
        headers: {
            'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('上传成功', data))
    .catch(error => console.error('上传失败', error));
}

后端处理：接收文件并转为字节数组 #

在你的Razor Page后台，新增文件上传处理方法：

public async Task<IActionResult> OnPostUploadImage()
{
    // 获取上传的文件
    var file = Request.Form.Files["uploadedImage"];
    if (file != null && file.Length > 0)
    {
        // 将文件转为字节数组
        using var memoryStream = new MemoryStream();
        await file.CopyToAsync(memoryStream);
        byte[] imageBytes = memoryStream.ToArray();

        // 这里可对字节数组做后续处理，如存数据库、文件系统等
        // ...

        return new JsonResult(new { success = true, message = "文件上传成功" });
    }
    return new JsonResult(new { success = false, message = "未选择有效文件" });
}

注意事项 #

• 前端FormData的键名（如uploadedImage）必须和后端Request.Form.Files的键名完全一致。
• Razor Page提交需携带RequestVerificationToken防止CSRF攻击，该值通常在页面的隐藏表单字段中。
• 若使用表单提交，可直接将<input type="file">放入form标签内，后端同样通过Request.Form.Files获取文件。

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