批量上传图片到服务器：解决多图上传图片丢失难题

php

2024-03-25 09:21:23

## 批量上传图片到服务器

背景

在开发过程中，我们需要从 React 应用程序上传多张图片到服务器，并将其存储在指定文件夹中。但是，每次上传多张图片时，文件夹中只会保存最后上传的图片，导致其他图片丢失。本文将详细介绍如何解决此问题，实现批量上传图片到服务器。

解决方案

前端步骤

1. 构建表单

创建一个包含文件选择器的表单，允许用户选择要上传的图片。

2. 创建提交处理函数

定义一个函数来处理表单提交事件，收集图片和其他相关数据，并将其封装成一个 FormData 对象。

后端步骤

1. 编写 PHP 控制器

在服务器端，编写一个 PHP 控制器来接收前端提交的 FormData 对象。

2. 处理文件上传

在控制器中，迭代处理 FormData 对象中的文件，检查错误并确保只有有效的图片才能上传。

3. 存储上传的图片

使用 move_uploaded_file() 函数将图片移动到指定文件夹。同时，记录上传图片的 URL 并存储在数组中。

4. 返回结果

将包含所有上传图片 URL 的数组作为响应发送回前端。

关键点

使用 FormData 对象传递文件和数据。
循环处理每个上传的文件。
使用唯一文件名防止文件覆盖。
存储所有上传图片的 URL。

代码示例

前端 (React)

const handleSubmit = (e) => {
  e.preventDefault();

  const formData = new FormData();
  // 添加其他数据和文件到 formData

  fetch('http://localhost:8000/controller/tweetPost.php', {
    method: 'POST',
    body: formData,
  })
  .then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(`Error: ${response.statusText}`);
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error: ', error);
  });
};

后端 (PHP)

<?php
if ($_FILES['img']['error'][0] === UPLOAD_ERR_OK) {
  $tmpName = $_FILES['img']['tmp_name'][0];
  $name = $_FILES['img']['name'][0];
  $extension = strtolower(pathinfo($name, PATHINFO_EXTENSION));

  if (in_array($extension, $validExtensions)) {
    $filename = uniqid("post_", true) . '.' . $extension;
    $filePath = $imgPostDir . $filename;

    if (move_uploaded_file($tmpName, $filePath)) {
      $imgURLs[] = "http://localhost:8000/img/post/" . $filename;
    }
  }
}