在表单提交时传递 PNG，请求 URL 太长

Question

所以我有一个有趣的问题。我有一个表单，用户在画布上绘制图像（想想签名板）。然后我需要将图像发送到我的 C# 控制器（我使用的是 ASP.NET MVC 5）。代码我有较短字符串的函数，但是当我尝试传递 PNG 数据时，它太长了，我收到 HTTP Error 414. The request URL is too long 错误。这是我的代码：

---

HTML：

<form id="mainForm" action="submitUserAnswer" method="post">
    <input type="hidden" id="userOutput" name="output" value="" />
    //...other form elements, signature box, etc.
</form>

Javascript：

function goToNextQuestion() {
    var output = $('#signature').jSignature("getData");
        $('#userOutput').val(output);
        $('#mainForm').submit();
}

C#：

public ActionResult submitUserAnswer()
    {
        //use the userOutput for whatever
        //submit string to the database, do trigger stuff, whatever
        //go to next question
        System.Collections.Specialized.NameValueCollection nvc = Request.Form;
        string userOutput = nvc["output"];
        ViewBag.Question = userOutput;
        return RedirectToAction("redirectToIndex", new { input = userOutput });
    }

    public ActionResult redirectToIndex(String input)
    {

        ViewBag.Answer = input;
        return View("Index");
    }

我的 png 数据很长，所以这个错误是有道理的。我的问题是如何将 png 数据返回到我的控制器？

Answer 1

也许你只需要increase allowed GET request URL length。

如果这不起作用，我有一个保存签名的 aspx WebForm，我使用 WebMethod

[ScriptMethod, WebMethod]
public static string saveSignature(string data)
{
    /*..Code..*/
}

我这样称呼它：

PageMethods.saveSignature(document.getElementById('canvas').toDataURL(), onSucess, onError);

我也必须increase the length of the JSON request，它工作正常，长度没有问题。

在 MVC 中没有WebMethods，但JSON and AJAX requests 可以完成这项工作，只需将数据保存在session 变量中，然后在需要时使用它。

希望对你有帮助

Answer 2

您有错误，因为您的数据是字符串（base64）并且对发送字符有最大限制，更好的方法是在客户端从 base64 创建 blob（png 文件），并将其发送到服务器。 编辑。此处列出的所有代码都存在于 stackoverflow 帖子中。

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = null;
    // TypeError old chrome and FF
    window.BlobBuilder = window.BlobBuilder || 
                         window.WebKitBlobBuilder || 
                         window.MozBlobBuilder || 
                         window.MSBlobBuilder;
    if(window.BlobBuilder){
         var bb = new BlobBuilder();
         bb.append(ab);
         blob = bb.getBlob(mimeString);
    }else{
         blob = new Blob([ab], {type : mimeString});
    }
    return blob;
}

function sendFileToServer(file, url, onFileSendComplete){
   var formData = new FormData()
   formData.append("file",file); 
   var xhr = new XMLHttpRequest();
   xhr.open('POST', url, true);
   xhr.onload = onFileSendComplete;
   xhr.send(formData);
}

var base64 = $('#signature').jSignature("getData");
var blob = dataURItoBlob(base64);
var onComplete = function(){alert("file loaded to server");}
sendFileToServer(blob, "/server", onComplete)