将大图像编码为 base64 不起作用

Question

我正在使用一个简单的表单，它以 base64 字符串的形式将图像发布到我的服务器。当我上传小图像（alert：

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);
}

将按钮更改为类型按钮，而不是提交。