Question

我正在使用一个简单的表单，以base64字符串的形式将图像发布到我的服务器。当我上传小图像（<500 kb）时，它适用于.jpg和.png文件。但是当大小为例如4 mb时，该函数什么都不做，甚至不打印警告：

HTML：

<form action="/nuevo_cuadro" method="post" accept-charset="utf-8">
    <input id="foto" type="file" name="foto" />
    <button type="submit" class="btn btn-primary" onclick="encodeImageFileAsURL();">Upload</button>
</form>

JS：

function encodeImageFileAsURL() {
    var filesSelected = document.getElementById("foto").files;
    var filename = document.getElementById("foto").value;

    var regex = /.*\\(.*)/;
    var match = regex.exec(filename);

    filename = match[1];

    if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result; // <--- data: base64

            alert(srcData);

            $.ajax({
                type: 'POST',
                url: '/upload/' + filename,
                data: srcData,
                dataType: "text",
                contentType:"text/plain"
            });
        }

        fileReader.readAsDataURL(fileToLoad);
    }
}

Answer 1

您是否故意尝试进行两次HTTP POST操作？你有<input type="submit">所以只要JS函数返回HTTP表单就会执行POST并且你关闭了。如果您更改为<input type="button">，那么表单不会执行帖子，您应该可以开始调试。

此外，我不确定当你试图警告一个几兆字节的base64编码图像时会发生什么！

通过削减你的榜样我取得了成功：

function encodeImageFileAsURL() {
    var filesSelected = document.getElementById("foto").files;

    var file = filesSelected[0];

    var reader = new FileReader();

    reader.onload = (function (f) {
        return function (e) {
            alert('***got here***');
        };
    })(file);

    reader.readAsDataURL(file);
}

将按钮更改为键入按钮，不提交。

将大图像编码到base64中不起作用

1 个答案: