javascript - 在 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 编码字符串发送。

我还尝试获取上传文件的完整路径，以便我可以将其转换为 Controller 中的 Base 64 字符串。

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

需要方向:)

谢谢!!

Answer 1

没有。这是不可能的，并且不清楚您为什么想要这样做。假设这是执行传统的 HTML 表单发布，您可以将上传字段绑定(bind)到 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 有两个问题会极大地影响页面性能:

1. 它们与 HTML 内容内联交付，这意味着下载页面需要更长的时间，浏览器解析和呈现页面的时间也更长。假设您的 HTML 文档为 1KB，并且您有一个 50KB 的图像。作为数据 URI，浏览器一次下载全部 51KB，并且只有在完成后才能开始渲染。作为普通 URL，浏览器下载 1KB 文档并立即开始渲染，并在最终到达时填充图像。您以这种方式在页面上包含的图像越多，这种情况就会呈指数级恶化。对于图像较多的网站，您可以轻松地在浏览器执行任何操作之前强制执行数兆字节的下载。

2. Base64 是一种效率非常低的编码。它可以将图像尺寸放大 150% 或更多。因此，如果您的图像为 50KB，则其 Base64 编码版本可能为 75KB。同样，您这样做的次数越多，您为页面添加的权重就越大。而且，结合上面的第一点，你加剧了一个已经很大的问题。

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