Question

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

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

这是表格：

<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>

我正在尝试找出标记帮助器是否可以将图像作为基本64位编码字符串发送的方法。

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

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

所需的方向：）

谢谢！

Answer 1

不。这是不可能的，目前尚不清楚为什么要这么做。假设这是在执行传统的HTML表单发布，则将上载字段绑定到类型为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。同样，您做的越多，添加到页面上的权重就越大。并且，结合上面的第一点，您正在激怒一个已经很大的问题。

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

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

1 个答案: