无需存储图片：如何将上传图片传递至PHP并在页面展示

看起来你遇到的核心问题是跨页面传递图片数据时的URL长度限制，以及之前PHP代码里的几个明显错误导致功能失效。下面先帮你理清之前代码的问题，再给出两种不需要存储图片到服务器的可行方案：

先梳理你之前代码的错误（该方案仍存在URL长度局限） #

你的PHP代码里有两处致命错误：

1. 变量名错误：base64_decode($base64_decode) 这里的变量名完全写错了，结合你前端去掉了dataURL前缀的逻辑，应该直接使用base64_decode($base64_string)；
2. 重复解码：代码里写了两次base64_decode，这会导致原本正确的Base64字符串被错误二次解码，最终无法生成有效图片。

不过即使修复这些错误，把大图片的Base64放在URL参数里依然会触发GET请求长度限制，所以这个方案本质上不适合大图片，更推荐下面的两种方案。

方案一：纯前端用 Session Storage 传递（最推荐，无需服务器参与） #

Session Storage 是浏览器提供的会话级存储，页面跳转后只要在同一会话内就能读取数据，完全不用经过服务器，完美匹配你的需求。

Page1 前端代码修改： #

// 处理图片上传并存储到sessionStorage
function handleImageUpload(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    // 把完整的dataURL（带前缀）存在sessionStorage里
    sessionStorage.setItem('uploadedImage', e.target.result);
    // 跳转到page2
    window.location.href = 'riepilogo.php';
  };
  reader.readAsDataURL(file);
}

// 给上传按钮绑定事件（假设你的上传input id是imageUpload）
document.getElementById('imageUpload').addEventListener('change', handleImageUpload);

Page2（riepilogo.php）前端代码： #

<!-- 在页面加载时从sessionStorage读取并展示图片 -->
<script>
window.onload = function() {
  const imageData = sessionStorage.getItem('uploadedImage');
  if (imageData) {
    const imgElement = document.querySelector('.cart-image img');
    imgElement.src = imageData;
    // 可选：用完后删除存储的数据，避免占用浏览器空间
    sessionStorage.removeItem('uploadedImage');
  }
};
</script>

<a class="cart-image" href="#"><img src="" alt="logo"></a>

这个方案的优势：

• 完全不需要服务器处理图片数据，性能更优
• 没有URL长度限制，支持大体积图片
• 实现简单，代码量少

方案二：用POST请求传递数据（必须经过PHP时使用） #

如果你的业务逻辑必须经过PHP处理，可以改用POST请求传递Base64数据，避开GET的长度限制，同时PHP不需要保存文件，直接输出dataURL给前端即可。

Page1 前端代码（用表单提交）： #

<!-- 用隐藏表单提交数据 -->
<form id="imageForm" action="riepilogo.php" method="POST">
  <input type="hidden" name="imageData" id="imageData">
  <!-- 你的上传input -->
  <input type="file" id="imageUpload">
  <button type="submit">跳转至Page2</button>
</form>

<script>
document.getElementById('imageUpload').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    // 把完整的dataURL赋值给隐藏输入框
    document.getElementById('imageData').value = e.target.result;
  };
  reader.readAsDataURL(file);
});
</script>

Page2（riepilogo.php）代码： #

<?php
$imageData = $_POST['imageData'] ?? '';
?>

<a class="cart-image" href="#"><img src="<?php echo htmlspecialchars($imageData); ?>" alt="logo"></a>

这个方案的优势：

• 避免了GET请求的长度限制
• PHP不需要存储文件，直接输出dataURL即可
• 符合传统的表单提交流程

两种方案都能满足你「无需存储图片到服务器」的需求，优先推荐方案一，因为它更高效且无需服务器参与。

内容的提问来源于stack exchange，提问作者chaw359