ASP.NET MVC - Невозможно привязать IFormFile к Blob (изображение) - PullRequest
0 голосов
/ 12 июня 2019

В настоящее время я создаю объект FormData, который содержит массив со следующими свойствами: "ProductId" и "UserImage" .Просто чтобы дать больше контекста, свойство «UserImage» получит BLOB-объект (изображение).BLOB-объект генерируется следующими двумя методами: "imagetoblob" и "b64toBlob" .Всякий раз, когда я пытался отправить FormData на свою серверную часть, мой контроллер зависает в течение примерно 45 секунд и возвращает сообщение Network Error .Поэтому я не могу связать значения из FormData с моим классом модели (Product).Тем не менее, когда я удаляю переменную UserImage из своего класса модели, я смог успешно отправить и связать formData.

// public IFormFile UserImage { get; set; } // remove

То, что кажетсяпроблема?Ниже приведены мой код и снимки экрана с моей ошибкой

Обновление Я все еще пытаюсь решить эту проблему.Любая помощь приветствуется!

На стороне клиента

// Assuming I have the base64URL values
var base64Image1 = "";
var base64Image2 = "";
const formData = new FormData();

formData.append("Products[0].ProductId", "1");
formData.append("Products[0].UserImage", imagetoblob(base64Image1));
formData.append("Products[1].ProductId", "1");
formData.append("Products[1].UserImage", imagetoblob(base64Image2));


function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || "";
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (
          var offset = 0;
          offset < byteCharacters.length;
          offset += sliceSize
        ) {
          var slice = byteCharacters.slice(offset, offset + sliceSize);

          var byteNumbers = new Array(slice.length);
          for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
          }

          var byteArray = new Uint8Array(byteNumbers);

          byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
      }

      function imagetoblob(base64Image) {
        // Split the base64 string in data and contentType
        var block = base64Image.split(";");
        // Get the content type of the image
        var contentType = block[0].split(":")[1]; // In this case "image/gif"
        // get the real base64 content of the file
        var realData = block[1].split(",")[1]; // In this case "R0lGODlhPQBEAPeoAJosM...."

        // Convert it to a blob to upload
        return b64toBlob(realData, contentType);
      }

На стороне сервера (контроллер)

[HttpPost("verifyCart")]
public async Task<IActionResult> verifyCart([FromForm] List<Product> products)
{
}

на стороне сервера (класс модели)

public class Product
{
    public int ProductId { get; set; }
    public IFormFile UserImage { get; set; } 
}

Ключ UserImage в FormData содержит большой двоичный объект (файл) - на стороне клиента FormData's UserImage key contains the blob (file)

Ошибка сети, полученная от клиентской стороны NetWork Error received from client-side

Возможность получать и связывать FormData после удаления пользовательского изображения IFormFile в классе модели - на стороне сервера enter image description here

...