将图像数据传递给控制器失败答案

【问题标题】：passing data of image to controller fails将图像数据传递给控制器失败
【发布时间】：2022-12-18 23:30:10
【问题描述】：

我正在通过 html2canvas 从 div 制作图像，然后想将其发送回控制器。我将结果设置在输入文本文件中，以在控制器中具有值

我在客户端有这个：

var element = $("#chng");
     html2canvas(element,{
       onrendered : function(canvas){
           var imageData = canvas.toDataURL("image/jpg");
           var newData= imageData.replace(/^data:image\/jpg/, "data:application/octet-stream");
            $("#img1").val(newData);       
     
       }
   });
   $("#infoForm").submit();

和

  <form method="post"  enctype="multipart/form-data" asp-controller="Answers" id="infoForm">
        <input type="text" id="img1" name="img1" />
        <input type="button" onclick="formsubmit()" value="print PDF" />
   </form>

和控制器

   [HttpPost]
    public async Task<IActionResult> PrintPDF(long wId, long cId, long pId, long aId, short no , string img1)
    {
       //but img1 is always null
       //ToDO something here

        return View();
       
    }

但是 img1 始终为空，尽管客户端中的 newData 和 imageData 的值正常可能是什么问题呢？

【问题讨论】：

标签： c# model-view-controller html2canvas

【解决方案1】：

首先，HTML 中的 <form> 元素没有 asp-action 属性指定提交表单时应调用的操作方法。这意味着表单不会提交给正确的操作方法，img1 参数也不会传递给控制器。

您可以通过向 <form> 元素添加 asp-action 属性来解决此问题：

<form method="post" enctype="multipart/form-data" asp-controller="Answers" asp-action="PrintPDF" id="infoForm">

其次，<input>元素的onclick属性正在调用formsubmit()函数，但您的代码中没有定义这样的函数。因此单击按钮时不会提交表单，并且不会将img1参数传递给控制器。

您可以通过从 <input> 元素中删除 onclick 属性，并在 JavaScript 代码中调用 infoForm 表单的 submit() 方法来解决此问题：

var element = $("#chng");
html2canvas(element,{
   onrendered : function(canvas){
       var imageData = canvas.toDataURL("image/jpg");
       var newData= imageData.replace(/^data:image/jpg/, "data:application/octet-stream");
        $("#img1").val(newData);       
 
       }
});
$("#infoForm").submit();

第三，<form>元素的enctype属性设置为"multipart/form-data"，但是img1参数不是正在上传的文件。这会导致img1参数在控制器中为空，因为multipart/form-data编码不适用于非文件数据。

您可以通过将 <form> 元素的 enctype 属性更改为 "application/x-www-form-urlencoded" 来解决此问题：

<form method="post" enctype="application/x-www-form-urlencoded" asp-controller="Answers" asp-action="PrintPDF" id="infoForm">

【讨论】：