Blob图片URL通过AJAX传递至PHP失败，寻求技术帮助

First, let's break down why your current code isn't working: you're appending the Blob URL string to FormData, not the actual Blob/file data. PHP can't process a URL as an uploaded file, which is why your $_FILES array comes back empty.

Here's how to fix this step by step:

Step 1: Fetch the actual Blob data from the URL #

The blob URL is just a reference to data stored in your browser's memory. We need to retrieve the raw Blob using the fetch() API, then add that to FormData:

console.log(apk.app.icon_url); // Output: blob:http://localhost/9ca5a837-fdb4-4288-a21a-18e9650e6ac5

// Fetch the blob from its URL
fetch(apk.app.icon_url)
  .then(response => response.blob())
  .then(blob => {
    // Convert the blob to a File object (adds filename metadata for PHP)
    const iconFile = new File([blob], 'app-icon.png', { type: blob.type });
    
    // Build FormData with the actual file
    const data = new FormData();
    data.append('icon', iconFile);
    
    // Send the request via AJAX
    $.ajax({
      url: "testicon.php",
      type: 'POST',
      data: data,
      contentType: false,
      processData: false,
      success: function(response) {
        alert("Upload result: " + response);
      },
      error: function(xhr, status, err) {
        console.error("Upload failed:", err);
      }
    });
  })
  .catch(err => {
    console.error("Failed to load blob data:", err);
  });

Step 2: Update your PHP code (testicon.php) #

Make sure you're checking the $_FILES superglobal (not $_POST) for the uploaded file, and handle the file storage properly:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // Check if a file was uploaded without errors
  if (isset($_FILES['icon']) && $_FILES['icon']['error'] === UPLOAD_ERR_OK) {
    $tempPath = $_FILES['icon']['tmp_name'];
    $fileName = $_FILES['icon']['name'];
    $uploadDir = 'uploads/'; // Create this folder if it doesn't exist
    
    // Ensure upload directory exists and is writable
    if (!file_exists($uploadDir)) {
      mkdir($uploadDir, 0777, true);
    }
    
    $destination = $uploadDir . $fileName;
    
    // Move the temporary file to the upload directory
    if (move_uploaded_file($tempPath, $destination)) {
      echo "File uploaded successfully to: " . $destination;
    } else {
      echo "Failed to save the uploaded file.";
    }
  } else {
    $errorCode = $_FILES['icon']['error'] ?? 'unknown';
    echo "Upload error: Code " . $errorCode;
  }
} else {
  echo "Invalid request method.";
}
?>

Important Notes: #

• File vs Blob: Converting the Blob to a File adds a filename, which makes it easier to handle in PHP. You could also append the Blob directly to FormData if you don't need a filename.
• Directory Permissions: The uploads/ folder needs write permissions (use chmod 777 uploads/ or adjust to match your server's security settings).
• Error Handling: Added error checks in both JavaScript and PHP to help you debug any issues that pop up.

Let me know if you hit any snags with this setup!

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