Glitch平台A-Frame 360°图片上传功能实现故障求助

看起来你在Glitch上搭建360°图片上传空间时，卡在了上传按钮无法正常工作的环节。从你给出的PHP代码片段来看，后端逻辑不完整，再加上Glitch平台的特殊环境限制，大概率是这两方面共同导致的问题。我来帮你一步步梳理修复方案：

一、先补全并优化后端PHP上传逻辑 #

你提供的代码截断了关键的错误处理和文件移动步骤，而且用explode处理扩展名不够可靠，我给你调整成完整的可运行版本：

<?php
session_start(); // 用来存储上传成功的图片路径，方便后续查看
$uploadSuccess = false;
$errorMsg = '';

if(isset($_FILES['image'])){
    $errors = array();
    $file_name = $_FILES['image']['name'];
    $file_size = $_FILES['image']['size'];
    $file_tmp = $_FILES['image']['tmp_name'];
    $file_type = $_FILES['image']['type'];
    $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); // 用pathinfo更稳定

    // 360图片常用格式，可根据你的查看器支持调整
    $allowedExts = array("jpeg","jpg","png", "gif");
    $maxFileSize = 5 * 1024 * 1024; // Glitch免费版单文件别太大，先设5MB

    // 扩展名校验
    if(!in_array($file_ext, $allowedExts)){
        $errors[] = "仅支持JPEG/PNG/GIF格式，请重新选择";
    }

    // 文件大小校验
    if($file_size > $maxFileSize){
        $errors[] = "文件不能超过5MB，请压缩后上传";
    }

    // 无错误则执行上传
    if(empty($errors)){
        $uploadDir = __DIR__ . '/uploads/';
        // 自动创建上传目录（Glitch默认允许项目内目录写入）
        if(!is_dir($uploadDir)){
            mkdir($uploadDir, 0755, true);
        }
        // 用uniqid避免文件名重复覆盖
        $targetPath = $uploadDir . uniqid('360_') . '.' . $file_ext;

        if(move_uploaded_file($file_tmp, $targetPath)){
            $uploadSuccess = true;
            $_SESSION['uploaded_img'] = basename($targetPath);
        } else {
            $errors[] = "文件上传失败，请检查Glitch项目的存储权限";
        }
    }

    if(!empty($errors)){
        $errorMsg = implode('<br>', $errors);
    }
}
?>

二、修复前端表单的关键配置 #

很多时候上传失效是前端表单没做对，必须加上enctype="multipart/form-data"才能让后端接收文件，给你一个配套的前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>360°图片上传空间</title>
</head>
<body>
    <h2>上传你的全景图片</h2>
    <?php if($errorMsg): ?>
        <p style="color: #dc3545;"><?php echo $errorMsg; ?></p>
    <?php endif; ?>
    <?php if($uploadSuccess): ?>
        <p style="color: #28a745;">上传成功！<a href="view.php">立即查看全景图</a></p>
    <?php endif; ?>

    <!-- 重点：必须设置enctype才能上传文件 -->
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="image" accept="image/jpeg, image/png, image/gif" required>
        <button type="submit" style="margin-left: 10px;">上传</button>
    </form>
</body>
</html>

三、适配Glitch平台的特殊设置 #

Glitch的环境和普通服务器不一样，这些细节容易踩坑：

• 调整PHP上传限制：在项目根目录创建.user.ini文件，添加以下内容，避免因默认限制太小导致上传失败：

  upload_max_filesize = 5M
  post_max_size = 6M
  

• 查看项目日志：如果还是失败，打开Glitch编辑器的「Logs」标签，看有没有PHP报错（比如权限不足、路径错误），这是排查问题的最快方式。
• 持久化存储注意：Glitch的临时存储会在项目重启后清空，如果需要长期保存图片，得用外部存储服务（比如AWS S3），测试阶段用临时存储就够了。

四、可选：添加360图片查看功能 #

上传成功后，你可以用view.php来展示全景图，这里用常用的Photo Sphere Viewer举例：

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
    <title>查看全景图</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
</head>
<body>
    <div id="viewer" style="width: 100vw; height: 100vh;"></div>
    <script>
        new PhotoSphereViewer.Viewer({
            container: document.querySelector('#viewer'),
            panorama: 'uploads/<?php echo $_SESSION['uploaded_img']; ?>',
        });
    </script>
</body>
</html>

按这个步骤调整后，应该就能解决上传按钮失效的问题了。如果还有问题，优先看Glitch的日志信息，里面会明确告诉你哪里出了问题。

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