В настоящее время я создаю объект 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 после удаления пользовательского изображения IFormFile в классе модели - на стороне сервера