Загрузка изображения в виде строки b64 с помощью тегов помощников в ASP.net Core - PullRequest
Новая
       31

Загрузка изображения в виде строки b64 с помощью тегов помощников в ASP.net Core

0 голосов
/ 18 февраля 2019

Привет, ребята. Мне нужно отправить изображение в виде закодированной строки 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 в контроллере.

Но я получаю только имя изображения.

Направление необходимо:)

Спасибо !!

1 Ответ

0 голосов
/ 18 февраля 2019

Нет.Это невозможно, и неясно, почему вы хотите.Предполагая, что это выполняется в традиционной 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 данных, которые существенно влияют на производительность страницы:

  1. Они доставляются в виде содержимого HTML, что означает, что загрузка страницы займет больше времени, а браузеру - больше.разобрать и сделать это.Допустим, ваш HTML-документ имеет размер 1 КБ, а у вас изображение размером 50 КБ.В качестве URI данных браузер загружает все 51 КБ за один раз и может начать рендеринг только после завершения.Как обычный URL, браузер загружает документ размером 1 КБ и сразу же начинает рендеринг, заполняя изображение, когда оно, наконец, прибывает.Эта ситуация экспоненциально ухудшается, чем больше изображений вы включаете на страницу таким образом.Для сайта с большим количеством изображений вы можете легко форсировать загрузку в несколько мегабайт, прежде чем браузер сможет что-либо сделать.

  2. Base64 - очень неэффективная кодировка.Это может раздувать изображения размером 150% и более.Таким образом, если ваш образ имеет размер 50 КБ, его версия в кодировке Base64, скорее всего, будет 75 КБ.Опять же, чем больше вы это делаете, тем больше веса вы добавляете на свою страницу.И в сочетании с пунктом 1 выше вы раздражаете и без того большую проблему.

URI данных лучше всего зарезервировать для очень маленьких простых изображений, таких как значок или что-то еще.Когда вы начнете использовать их с такими вещами, как фотографии, у вас будут большие проблемы.Тот факт, что вы разрешаете пользовательские загрузки, означает, что вы даже не можете полностью контролировать, насколько большими будут URI данных, если вы не ограничите размер загрузки чем-то незначительным.По умолчанию пользователь может загружать до 2 МБ файлов.Это может означать, что вы отправляете 3 МБ или более встроенного документа HTML, что, честно говоря, просто безумие.Конечно, вы можете изменять размер или сжимать загружаемые пользователем изображения, чтобы сделать их меньше, но вы должны помнить об этом.

...