Question

所以我有一个有趣的问题。我有一个表单，用户在画布上绘制图像（想象一个签名板）。然后我需要将图像发送到我的C＃Controller（我使用的是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)

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

2 个答案: