如何使用ajax发送大图像或其base64字符串？

Posted 2023-03-22

【中文标题】如何使用ajax发送大图像或其base64字符串？

【英文标题】：How to send large image or its base64 string, using ajax?

【发布时间】：2016-12-21 13:51:33

【问题描述】：

我有一个 jpeg 图像的文件输入。它在更改时生成 base64 字符串并将其放入其他不可见的文本输入中。然后我按下按钮并使用 ajax POST 将字符串发送到服务器。 它适用于 300-400kb 以下的图片，但是当我尝试上传 500kb+ 大小的大图片时，base64 字符串限制为 524288 个字符。

<input type="file" id="imgUp" accept=".jpg" display: none;"> 
<input type="text" id="imgTempUrl"/>

<script type="text/javascript">
    $(function()
    //When new file/image is loaded, update temporary input with new base64 string
        $('#imgUp').change(function()
            imgUp = document.getElementById('imgUp');
            if(imgUp.files && imgUp.files[0])
                var reader = new FileReader();
                reader.onload = function(e)
                    $('#imgTempUrl').val(e.target.result);
                ;
                reader.readAsDataURL(imgUp.files[0]);
            
        );
    );
</script>

我的问题是：有没有办法在将图像转换为 base64 字符串之前消除输入字符的限制或压缩/调整图像大小？ 提前谢谢！

【问题讨论】：

考虑FormData

该问题更可能与服务器上的请求传输限制有关。例如，默认情况下 IIS 仅限制为几兆字节。要一次性发送这么多数据，您可能需要要求您的托管公司修改服务器设置以允许它。

服务器允许上传大约40mb。问题是文本输入限制为 524288 个字符。

这就是你的问题，500 > 40。正如我所提到的，你需要向你的托管公司提出请求以增加限制 - 假设你没有直接访问服务器的权限。文本限制问题是次要的，但你真的应该改用FormData。

我会试试的。谢谢。

【参考方案1】：

我找到了简单的解决方案：我使用隐藏图像而不是文本输入，然后使用它的“src”属性作为我的 base64 字符串：它不受限制并且适用于非常大的文件。

<input type="file" id="imgUp" accept=".jpg">     
<img src="" id="imgTempUrl" style="" display: none;"> 

<script type="text/javascript">
    $(function()
    //When new file/image is loaded, update temporary input with new base64 string
        $('#imgUp').change(function()
            imgUp = document.getElementById('imgUp');
            if(imgUp.files && imgUp.files[0])
                var reader = new FileReader();
                reader.onload = function(e)
                    $('#imgTempUrl').attr("src",e.target.result);
                ;
                reader.readAsDataURL(imgUp.files[0]);
            
        );
    );
</script>

【讨论】：

好的，但是如何上传这张图片？