Question

在上传之前，我一直在尝试调整图片客户端（使用HTML5）。它调整大小并通过base64字符串发送，但它似乎被打破了。 base64字符串有空格和换行符以及奇怪的东西，即使我把它们拿出来，它似乎仍然被破坏了。这是我的HTML：

        <div class="form-group">
            <canvas id="canvas"></canvas>
            <label for="fileToUpload">Select Files to Upload</label>
            <input type="file" id="FileUpload1" name="FileUpload1" />
            <output id="filesInfo"></output>
        </div>

当然我的javascript：

<script type="text/javascript">
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('FileUpload1').onchange = function () {
            var files = document.getElementById('FileUpload1').files;
            for (var i = 0; i < files.length; i++) {
                resizeAndUpload(files[i]);
            }
        };
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    function resizeAndUpload(file) {
        var reader = new FileReader();
        reader.onloadend = function () {

            var tempImg = new Image();
            tempImg.src = reader.result;
            tempImg.onload = function () {

                var MAX_WIDTH = 400;
                var MAX_HEIGHT = 300;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }

                var canvas = document.getElementById('canvas');
                canvas.width = tempW;
                canvas.height = tempH;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                var dataURL = canvas.toDataURL("image/jpeg");

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function (ev) {
                    document.getElementById('filesInfo').innerHTML = 'Done!';
                };

                xhr.open('POST', 'Upload', true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                alert(dataURL);
                var data = 'image=' + dataURL;
                xhr.send(data);
            }

        }
        reader.readAsDataURL(file);
    }
</script>

dataURL变量，包含错误的base64字符串。

Answer 1

这是你的问题：

Base 64编码字符串包含/和+等字符，如果请求内容类型被称为application/x-www-form-urlencoded，您可以想象它们具有特殊意义。因此，使用当前代码，+符号会被解码为空格，而像\n这样的组合会被解释为控制字符，例如换行符，换行符等。

您需要做的就是编码dataURL以确保它可以安全地用作参数值。这就像使用encodeURIComponent方法一样简单。

即。 var data = 'image=' + encodeURIComponent(dataURL);

希望这有帮助。

Javascript文件调整大小生成坏base64字符串

1 个答案: