javascript - PHP base64_decode 未将 base64 字符串转换为真正可用的图像文件

Question

大家好，我成功找到了一种方法，该方法声称可以将文件输入文件转换为 JavaScript 中的 Base 64 字符串，因此我成功发送了该 Base 64

通过 AJAX 由 JSON 生成的字符串，base 64 编码的字符串看起来像这样在 JSON 方法“photo”中发送:“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wB 等...”

当 Base 64 字符串到达​​ PHP 文件时。 PHP 很神奇，成功地将文件存储在我想要该文件所在的目标文件夹中，因此当我查看该文件夹时，有一个文件，但是

当我尝试打开照片文件进行查看时，照片查看器应用程序会显示类似 image.jpg 的内容，看起来我们不支持此文件格式，而在其他照片查看器应用程序中，它会显示一些内容

与此类似，那么我做错了什么？

这是我的代码

index.php

<style>

#photo-input{
display: block;
margin-bottom: 50px;
}

</style>

<script>

document.addEventListener('DOMContentLoaded',function(){

document.querySelector('#submit').addEventListener('click',function(){

var photo_input= document.querySelector('#photo-input').files[0];

//Convert #photo-input content into a base 64 string
var reader = new FileReader();
reader.readAsDataURL(photo_input);

reader.onload = function (){
var photo_input_result= reader.result;
sendUploadInfo(photo_input_result);
}
//

});

function sendUploadInfo(photo_input_result){

var photo= photo_input_result;

//<JSON data>

var upload_info = {
    first_name: "John",
    last_name: "Smith",
    photo: photo
};

//</JSON data>

var upload_info_json_object= 'upload_info_json_object='+JSON.stringify(upload_info); 

//<AJAX>
var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function(){

if(xhr.readyState == 4){

document.querySelector('#output').innerHTML= xhr.responseText;

}
}

xhr.open('POST','x');
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(upload_info_json_object);
//</AJAX>
}

});

</script>

<input type='file' id='photo-input'>

<button id='submit'>Send JSON data</button>

<div id='output'></div>

x.php

<?php

$upload_info_json_object = json_decode($_POST['upload_info_json_object']);

$first_name= $upload_info_json_object->first_name;
$last_name= $upload_info_json_object->last_name;


//Photo upload section

$photo= $upload_info_json_object->photo;

base64_decode($photo); 

$path= $_SERVER['DOCUMENT_ROOT'].'/send-json-data-by-ajax/object-based/with-file/2/images/image.jpg';

file_put_contents($path, $photo);

//

?>

<h1><?php echo $first_name.' '.$last_name.' just uploaded a photo.'; ?></h1>

Answer 1

我认为你应该完全放弃当前的方法并用以下方法替换:

<form action="x.php" method="post" enctype="multipart/form-data">
  <input type="hidden" name="first_name" value="John" />
  <input type="hidden" name="last_name" value="Smith" />
  <input type="file" name="photo" accept="image/*" />
  <input type="submit" value="Upload Photo" />
</form>

然后，在服务器端代码上检查结果，如下所示:

<?php
  print_r($_POST); // All of your post fields
  print_r($_FILES); // All of the file uploads

查看move_uploaded_file()当您知道要将其放在哪里时。

有很多好处:

• 真正的二进制文件上传，没有 33% base-64 的浪费和开销，也没有双方的 CPU 来处理它
• 仅接受图像的图像输入 (accept="image/*")
• 表单可以通过屏幕阅读器和其他浏览器控件提交，而不仅仅是一些没有上下文的按钮
• 根本不需要 JavaScript!
• 标准流式传输上传，以减少服务器上的内存使用。
• 无需对可能巨大的 JSON blob 进行编码/解码。