如何使用C#将文件转为图片并返回前端？含Blob转Base64操作

1. 核心逻辑：文件流转JPG并转Base64 #

方案一：使用System.Drawing.Common（依赖GDI+） #

首先安装NuGet包：

dotnet add package System.Drawing.Common

转换代码：

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;

public string ConvertFileToJpgBase64(Stream fileStream)
{
    // 从文件流加载图像
    using (var image = Image.FromStream(fileStream))
    {
        using (var ms = new MemoryStream())
        {
            // 保存为JPG格式，质量参数0-100（数值越高质量越好）
            image.Save(ms, ImageFormat.Jpeg);
            // 将字节数组转换为Base64字符串
            return Convert.ToBase64String(ms.ToArray());
        }
    }
}

方案二：使用ImageSharp（跨平台无GDI+依赖） #

适合.NET Core/.NET 5+跨平台场景，先安装NuGet包：

dotnet add package SixLabors.ImageSharp
dotnet add package SixLabors.ImageSharp.Formats.Jpeg

转换代码：

using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Formats.Jpeg;
using SixLabors.ImageSharp.PixelFormats;
using System.IO;

public string ConvertFileToJpgBase64(Stream fileStream)
{
    using (var image = Image.Load<Rgba32>(fileStream))
    {
        using (var ms = new MemoryStream())
        {
            var encoder = new JpegEncoder { Quality = 80 };
            image.Save(ms, encoder);
            return Convert.ToBase64String(ms.ToArray());
        }
    }
}

2. 后端API接口返回Base64 #

以ASP.NET Core API为例，编写接收文件并返回转换结果的接口：

[ApiController]
[Route("api/file")]
public class FileConvertController : ControllerBase
{
    [HttpPost("to-jpg")]
    public IActionResult ConvertToJpg(IFormFile file)
    {
        if (file == null || file.Length == 0)
            return BadRequest("请上传有效文件");

        try
        {
            using (var stream = file.OpenReadStream())
            {
                var base64 = ConvertFileToJpgBase64(stream);
                // 拼接data URI前缀，前端可直接用于img标签
                return Ok(new { ImageData = $"data:image/jpeg;base64,{base64}" });
            }
        }
        catch (Exception ex)
        {
            return StatusCode(500, $"转换失败：{ex.Message}");
        }
    }
}

3. 前端接收并展示图片 #

原生JavaScript示例：

<input type="file" id="fileInput" accept="image/*">
<img id="previewImg" alt="转换后预览" />

<script>
document.getElementById('fileInput').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
        const res = await fetch('/api/file/to-jpg', {
            method: 'POST',
            body: formData
        });
        const result = await res.json();
        document.getElementById('previewImg').src = result.ImageData;
    } catch (err) {
        console.error('转换出错:', err);
    }
});
</script>

关键注意事项 #

• 非图像文件转换：如果需要将PDF、Word等非图像文件转图片，需额外依赖第三方库：PDF转图可用PdfiumViewer，文档转图可用DocX或Microsoft.Office.Interop.Word（需安装Office），先将文件转为图像流再执行上述Base64转换。
• 性能优化：大文件转换建议用异步方法避免阻塞；Base64会使数据体积增大30%左右，超大文件建议直接返回Blob流给前端，而非Base64。
• 格式兼容：确保原文件流可被图像库识别，若遇到小众格式，可先通过格式转换工具预处理。

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