使用表单方法将隐藏输入值设置为要提交的 blob

我正在尝试提交一个表单，其中一个 blob 附加到一个隐藏的输入标签，如下所示。

<form method="POST" action="api/save/image">
   <input id="p_id" type="hidden" name="p_id" value=""/>
   <input id="image" type="hidden" name="image" value=""/>
   <button type="submit">Save Photo</button>
</form>

我的 Javascript 看起来像这样。

$(document).ready(function(){
    $('#p_id').val("444666"); //set hidden input

    var croppedPhoto = $('#crop_stage').cropper('getCroppedCanvas');
    croppedPhoto.toBlob(function (blob) {
          $('#image').val(blob); //set blob to form hidden input
    }

});

我的问题是我无法提交此内容，因为 blob 没有保存到隐藏字段，而是值 [object Blob]。

如何附加我的 blob 以便将其提交到服务器？

另请注意，我无法使用 formData();因为我必须支持IE8/IE9。

感谢您的帮助。

这是一个8年前的问题了，不幸的是我也经历过同样的事情。

我的解决方案是更换toBlob with toDataURL

$(document).ready(function(){
    $('#p_id').val("444666"); //set hidden input

    var croppedPhoto = $('#crop_stage').cropper('getCroppedCanvas');
    $('#image').val(croppedPhoto.toDataURL); // set hidden input

});

该代码尚未测试，因为我已经很久没有使用 jquery 了。 在 vanilla.js 中可以这样做

let img = document.getElementById("image")
let data = croppedPhoto.toDataURL("image/jpeg", 0.9)
img.setAttribute("value", data)

注意我使用setAttribute而不是直接设置value因为这在我的情况下不起作用