在 ASP.net Core 中使用标签助手将图像上传为 b64 字符串

Question

大家好，我需要将图像作为编码的 b64 字符串发送到表单中的其他填充值中。

我知道我可以做 Ajax - post 但是有什么方法可以使用标签助手来做同样的事情。

表格如下：

<form class="form-padding" method="post">
  <a href="#"><img src=".." id="image"></a>
  <input type="file" class="form-control" asp-for="ImageUrl" id="dp-upload" onchange="readURL(this);">
       <label asp-for="FirstName"></label>
       <input asp-for="FirstName" />
       <label asp-for="LastName"></label>
       <input asp-for="LastName" />
       <label asp-for="Address">Address</label>
       <input asp-for="Address"  />
      <button type="submit">Add </button>
</form>
<script>
          function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image').attr('src', e.target.result);
                $('#dp-upload').attr('val', e.target.result);
                debugger
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

<script>

我正在尝试找出是否有一种方法可以使用标记助手将图像作为 base 64 编码字符串发送。

我还尝试获取上传文件的完整路径，以便在控制器中将其转换为 base 64 字符串。

但是，我只得到图像名称。

需要方向:)

谢谢！！

Answer 1

没有。这是不可能的，并且不清楚您为什么要这样做。假设这是在执行传统 HTML 形式 post，您会将上传字段绑定到类型 IFormFile 的属性。然后你就可以访问流，如果你愿意，你可以在事后将其转换为 Base64：

using (var ms = new MemoryStream())
using (var fs = model.ImageUpload.OpenReadStream())
{
    await fs.CopyToAsync(ms);
    model.ImageUrl = $"data:{model.ImageUpload.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}";
}

无论如何，您应该避免使用数据 URI，尤其是对于用户上传的文件。数据 URI 存在两个严重影响页面性能的问题：

它们与 HTML 内容一起交付，这意味着下载页面需要更长的时间，浏览器解析和呈现页面的时间也更长。假设您的 HTML 文档是 1KB，而您有一张 50KB 的图像。作为数据 URI，浏览器一次下载所有 51KB，并且只能在下载完成后才开始渲染。作为正常 URL，浏览器下载 1KB 文档并立即开始渲染，并在最终到达时填充图像。您以这种方式在页面上包含的图像越多，这种情况就会呈指数级增长。对于图片较多的网站，您可以轻松地在浏览器执行任何操作之前强制下载数兆字节。
Base64 是一种非常低效的编码。它可以将图像尺寸放大 150% 或更多。所以如果你的图像是 50KB，它的 Base64 编码版本可能是 75KB。同样，您这样做的次数越多，您添加到页面的权重就越大。而且，结合上面的第 1 点，你正在激怒一个已经很严重的问题。

数据 URI 最好保留给非常小的简单图像，例如图标或其他东西。当您开始将它们用于照片之类的东西时，您将遇到大问题。您允许用户上传的事实意味着您甚至无法完全控制数据 URI 的大小，除非您将上传大小限制在很小的范围内。默认情况下，用户最多可以上传 2MB 的文件。这可能意味着您要在 HTML 文档中内联发送 3MB 或更多，坦率地说，这简直是疯了。你当然可以调整或压缩用户上传的图片，使它们变小，但你需要真正记住这样做。

在 ASP.net Core 中使用标签助手将图像上传为 b64 字符串

Image upload as b64 string using tag helpers in ASP.net Core

javascript

asp.net-core

asp.net-core-mvc

base64

tag-helpers