React+PHP上传图片：实现图片存目录、路径存MySQL

第一步：提前准备配置 #

• 在PHP项目根目录新建名为uploads的文件夹，给文件夹分配读写权限：Linux服务器可执行chmod 755 uploads设置权限，不要长期开放777权限避免安全风险，该文件夹专门用于存储上传的图片。
• 修改MySQLproducto表结构：将原来存储二进制内容的imagen2字段类型改为VARCHAR(255)，适配字符串类型的存储路径。

第二步：修改后端入口文件 index.php #

删除原有直接读取图片二进制内容的逻辑，新增文件校验、重名规避、文件移动逻辑，最终将图片的web可访问路径传入入库方法，替换后完整代码如下：

<?php
require_once('conexion.php');
require_once('api.php');
require_once('cors.php');
$method = $_SERVER['REQUEST_METHOD'];

if($method == "GET") {
    if(!empty($_GET['id'])){
      $id = $_GET['id'];  
      $api = new Api();
      $obj = $api->getProducto($id);
      $json = json_encode($obj);
      echo $json;     

    }else{
      $vector = array();
      $api = new Api();
      $vector = $api->getProductos();
      $json = json_encode($vector);
      echo $json;
    }
}

if($method=="POST"){
    $json = null;
    $nombre = $_POST['nombre'];
    $imagenPath = '';
    // 校验上传文件合法性
    if(!empty($_FILES['imagen2']) && $_FILES['imagen2']['error'] == UPLOAD_ERR_OK){
        $ext = strtolower(pathinfo($_FILES['imagen2']['name'], PATHINFO_EXTENSION));
        $allowedExt = ['jpg','jpeg','png','gif','webp'];
        if(in_array($ext, $allowedExt)){
            // 生成唯一文件名避免重名覆盖
            $newFileName = uniqid() . '.' . $ext;
            $serverSavePath = __DIR__ . '/uploads/' . $newFileName;
            // 将临时文件移动到正式存储目录
            if(move_uploaded_file($_FILES['imagen2']['tmp_name'], $serverSavePath)){
                // 存入数据库的是web可访问相对路径，不是服务器本地绝对路径
                $imagenPath = '/uploads/' . $newFileName;
            }
        }
    }
    $api = new Api();
    $json = $api->addProducto($nombre, $imagenPath);
    echo $json;
}
?>

第三步：修改接口逻辑文件 api.php #

删除原有二进制内容转base64的逻辑，直接读写路径字符串，同时补全列表接口的图片路径返回字段，替换后完整代码如下：

<?php
class Api{

public function getProductos(){
   $vector = array();
   $conexion = new Conexion();
   $db = $conexion->getConexion();
   $sql = "SELECT * FROM producto";
   $consulta = $db->prepare($sql);
   $consulta->execute();
   while($fila = $consulta->fetch()) {
       $vector[] = array(
         "id" => $fila['id'],
         "nombre" => $fila['nombre'],
         "imagen2" => $fila['imagen2']
       );
   }
   return $vector;
}

public function getProducto($id){
  $vector = array();
  $conexion = new Conexion();
  $db = $conexion->getConexion();
  $sql = "SELECT * FROM producto WHERE id=:id";
  $consulta = $db->prepare($sql);
  $consulta->bindParam(':id', $id);  
  $consulta->execute();
  while($fila = $consulta->fetch()) {
      $vector[] = array(
        "id" => $fila['id'],
        "nombre" => $fila['nombre'],
        "imagen2" => $fila['imagen2']
      );
  }
  return $vector[0];
}


public function addProducto($nombre, $imagen2){
  $conexion = new Conexion();
  $db = $conexion->getConexion();
  $sql = "INSERT INTO producto (nombre, imagen2) VALUES (:nombre,:imagen2)";
  $consulta = $db->prepare($sql);
  $consulta->bindParam(':nombre', $nombre);
  $consulta->bindParam(':imagen2', $imagen2);
  $consulta->execute();

  return '{"msg":"producto agregado","img_path":"'.$imagen2.'"}';
}
}
?>

第四步：前端适配说明 #

前端原有上传提交逻辑不需要改动，后续展示图片时，直接将接口返回的imagen2字段和站点域名拼接即可，例如接口返回/uploads/667xxx.jpg，图片完整地址为https://miweb.com/uploads/667xxx.jpg，直接填入<img>标签的src属性即可正常展示，不需要再做base64转码处理。

注意事项：

• 确保uploads目录对外开放访问权限，通过域名拼接路径可直接打开图片才算配置正确
• 后续开发编辑替换图片功能时，记得删除服务器上对应的旧图片文件，避免产生冗余垃圾文件
• 图片量大时可以按年/月在uploads下建子目录分类存储，方便后续维护管理

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