ASP.NET MVC - 无法将 IFormFile 绑定到 Blob（图像）答案

【问题标题】：ASP.NET MVC - Unable to bind IFormFile to Blob (Image)ASP.NET MVC - 无法将 IFormFile 绑定到 Blob（图像）
【发布时间】：2019-06-12 12:48:47
【问题描述】：

在我的前端，我目前正在创建一个 FormData 对象，该对象包含一个具有以下属性的数组："ProductId" 和 "UserImage"。只是为了提供更多上下文，“UserImage”属性将接收一个 blob（图像）。 Blob 使用以下 2 种方法生成："imagetoblob" 和 "b64toBlob"。每当我尝试将 FormData 发送到服务器端时，我的控制器都会冻结大约 45 秒并返回 Network Error 消息。因此，我无法将 FormData 中的值绑定到我的模型类（产品）。但是，当我从模型类中删除 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; } 
}

FormData 的 UserImage 键包含 blob（文件）——客户端

从客户端收到网络错误

模型类--Server-side去掉IFormFile UserImage后可以接收和绑定FormData

【问题讨论】：

嗨@JessedeWit 我不确定你的意思。将 base64Url 转换为 blob 的代码取自这个 stackoverflow 帖子：stackoverflow.com/questions/4392690/…
@JessedeWit 哦，我没注意到。但是，我已经更改了您指出的错误，但仍然无法使其正常工作。你知道问题出在哪里吗？

标签： javascript c# asp.net asp.net-mvc multipartform-data

【解决方案1】：

我认为您的主要问题是如何将文件附加到 formData 以及您在模型中使用的类型。

如果我是你，我会这样做：

formData.append("UserImage", imagetoblob(base64Image1));
formData.append("UserImage", imagetoblob(base64Image2));

您可以在此处将多个文件附加到同一个“UserImage”键。

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

在您的模型中，使用 List 作为您的数据类型。这应该适用于单个文件或多个文件上传。

【讨论】：