php - 在 PHP 中使用 AJAX 请求保存 base64 编码的图像

Question

我将 Canvas 图像编码为 base64，这给了我这个:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z

这看起来像是一个有效的 base64 图像(使用在线解码器对其进行解码)。

我使用 jquery ajax 将其与其他(表单)变量一起发送，如下所示:

$.ajax({
    type: "POST",
    url: "index.php?action=saveNewPost",
    data: {text: text, img: encodeURIComponent(base64img)},
    contentType: "application/x-www-form-urlencoded;charset=UTF-8",
    success: function(){
        //...
    }
});

在服务器上，这会转到此行:

saveImage(utf8_decode($_POST['img']));

调用:

function saveImage($base64img){
    define('UPLOAD_DIR', '../uploads/');
    $base64img = str_replace('data:image/jpeg;base64,', '', $base64img);
    $data = base64_decode($base64img);
    $file = UPLOAD_DIR . uniqid() . '.jpg';
    file_put_contents($file, $data);
}

但是，文件并未保存。可能出了什么问题？

Answer 1

让我们尝试在同一文件夹中使用单个函数和调用创建文件 test.php，检查浏览器或 /var/log/httpd/error_log 中的输出错误

<?php

function saveImage($base64img){
    define('UPLOAD_DIR', '../uploads/');
    $base64img = str_replace('data:image/jpeg;base64,', '', $base64img);
    $data = base64_decode($base64img);
    $file = UPLOAD_DIR . '123123123.jpg';
    file_put_contents($file, $data);
}

saveImage('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z');

这意味着 AJAX => php 脚本部分出现问题。现在，我们尝试比较从 ajax 收到的内容和原始字符串，只需将您的函数更改为此并查看 test.txt:

function saveImage($base64img){
    define('UPLOAD_DIR', '../uploads/');

    $file = UPLOAD_DIR . 'test.txt';
    file_put_contents($file, 'ORIG:'.'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAICAgICAQICAgICAgIDAwYEAwMDAwcFBQQGCAcICAgHCAgJCg0LCQkMCggICw8LDA0ODg4OCQsQEQ8OEQ0ODg7/2wBDAQICAgMDAwYEBAYOCQgJDg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg4ODg7/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5a/Z7/Zw8EfF/9mT4h6Z4u0GTwt8WNP1iSya7vZp0uNKYJBsItyANjt5o2uGkDBsHhMfDsOn2zWcTQ39tJCUBR5HVGYY4JUEgH2BIHrXunw71vWdI/aa+POraTq+p6Xqr+H/Edy15aXTxTNMt4m2QupDbxubDZyMn1r4yRE8pflXoO1fleQYDEzzHGxnXbjeEop6qPNFtpXb00Wm3zP1vNM2pUMLh5RpK75k3fV8rVm7LzP/Z'."\n".'AJAX:'.$base64img);
}