React Native应用向PHP服务器上传图片失败，求解决方案

问题概述 #

开发PHP后端项目，对接React Native应用时，图片上传功能多次尝试均失败，以下是常见的错误代码、问题表现及已调整的可行代码，提供进一步优化建议和替代实现方案。

最初的React Native上传代码（错误示例） #

// 错误写法：未正确处理FormData的文件类型或URI格式
const uploadImage = async (uri) => {
  const formData = new FormData();
  formData.append('photo', uri); // 直接传入URI而非文件对象

  try {
    const response = await fetch('http://your-server/upload.php', {
      method: 'POST',
      body: formData,
    });
    const result = await response.text();
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};

最初的PHP端upload.php代码（错误示例） #

<?php
// 错误写法：缺少权限检查、错误捕获
$uploadDir = 'uploads/';
$file = $_FILES['photo'];
move_uploaded_file($file['tmp_name'], $uploadDir . $file['name']);
echo '上传完成';
?>

遇到的错误 #

• PHP返回Undefined index: photo，提示未接收到上传文件
• RN端抛出Network Error或服务器返回500状态码
• 文件上传后为空文件，或提示Permission denied

修改后可行的上传函数代码（RN端） #

const uploadImage = async (uri) => {
  const formData = new FormData();
  const filename = uri.split('/').pop();
  // 自动识别图片类型
  const fileType = filename.split('.').pop();
  const type = `image/${fileType}`;

  formData.append('photo', {
    uri: Platform.OS === 'android' ? uri : uri.replace('file://', ''),
    name: filename,
    type: type,
  });

  try {
    const response = await fetch('http://your-server/upload.php', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
    throw error;
  }
};

优化建议与替代方案 #

1. PHP端增强鲁棒性 #

修改upload.php，添加权限检查、错误捕获和类型验证：

<?php
header('Content-Type: application/json');
$uploadDir = __DIR__ . '/uploads/';

// 创建上传目录（如果不存在）
if (!is_dir($uploadDir)) {
  mkdir($uploadDir, 0755, true);
}

// 检查是否接收到文件
if (!isset($_FILES['photo'])) {
  echo json_encode(['status' => 'error', 'msg' => '未检测到上传文件']);
  exit;
}

$file = $_FILES['photo'];

// 处理上传错误
if ($file['error'] !== UPLOAD_ERR_OK) {
  $errorMap = [
    UPLOAD_ERR_INI_SIZE => '文件大小超出php.ini限制',
    UPLOAD_ERR_FORM_SIZE => '文件大小超出表单限制',
    UPLOAD_ERR_PARTIAL => '文件仅部分上传',
    UPLOAD_ERR_NO_FILE => '未选择文件',
    UPLOAD_ERR_NO_TMP_DIR => '服务器临时目录缺失',
    UPLOAD_ERR_CANT_WRITE => '磁盘写入失败',
    UPLOAD_ERR_EXTENSION => '上传被扩展插件阻止'
  ];
  $errorMsg = $errorMap[$file['error']] ?? '未知上传错误';
  echo json_encode(['status' => 'error', 'msg' => $errorMsg]);
  exit;
}

// 限制图片类型
$allowedMimes = ['image/jpeg', 'image/png', 'image/gif'];
if (!in_array($file['type'], $allowedMimes)) {
  echo json_encode(['status' => 'error', 'msg' => '仅支持JPG/PNG/GIF格式']);
  exit;
}

// 生成唯一文件名避免覆盖
$filename = uniqid() . '-' . basename($file['name']);
$targetPath = $uploadDir . $filename;

// 移动上传文件
if (move_uploaded_file($file['tmp_name'], $targetPath)) {
  echo json_encode([
    'status' => 'success',
    'file_path' => str_replace(__DIR__, '', $targetPath)
  ]);
} else {
  echo json_encode(['status' => 'error', 'msg' => '文件移动失败，请检查目录权限']);
}
?>

2. RN端简化实现（使用第三方库） #

如果手动处理FormData容易出错，可使用react-native-image-picker库简化图片选择和上传：

import {launchImageLibrary} from 'react-native-image-picker';
import axios from 'axios';

const pickAndUploadImage = async () => {
  const result = await launchImageLibrary({
    mediaType: 'photo',
    quality: 0.8,
  });

  if (result.assets && result.assets[0]) {
    const asset = result.assets[0];
    const formData = new FormData();
    formData.append('photo', {
      uri: asset.uri,
      name: asset.fileName,
      type: asset.type,
    });

    try {
      const response = await axios.post('http://your-server/upload.php', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      console.log('上传成功:', response.data);
    } catch (err) {
      console.error('上传失败:', err);
    }
  }
};

3. 服务器环境检查 #

• 确保上传目录权限设置正确：执行chmod 755 uploads/（Linux服务器），或在Windows服务器中设置目录可写权限
• 检查php.ini中的上传限制：调整upload_max_filesize、post_max_size、max_execution_time等参数，避免因文件过大或超时导致失败

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