thinkphp 图片批量上传

基础概念

ThinkPHP 是一个流行的 PHP 开发框架，它提供了丰富的功能和组件，方便开发者快速构建 Web 应用程序。图片批量上传是指在一次请求中上传多个图片文件到服务器的过程。

类型

前端批量上传：通过 JavaScript 或 HTML5 的多文件选择功能实现。
后端批量处理：服务器端接收多个文件并进行处理和存储。

应用场景

社交媒体：用户上传多张照片到个人相册。
电商网站：商家上传多张商品图片。
博客平台：作者上传多张文章配图。

实现步骤

前端部分

使用 HTML5 的 <input type="file" multiple> 允许用户选择多个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片批量上传</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple>
        <button type="submit">上传</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log(response);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</body>
</html>

后端部分

在 ThinkPHP 中，可以使用 Request 对象获取上传的文件，并进行处理。

<?php
namespace app\controller;

use think\Controller;
use think\Request;

class UploadController extends Controller
{
    public function index(Request $request)
    {
        $files = $request->file('files');
        if ($files) {
            foreach ($files as $file) {
                // 移动文件到指定目录
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                if ($info) {
                    // 文件上传成功
                    echo $info->getSaveName() . "\n";
                } else {
                    // 文件上传失败
                    echo $file->getError() . "\n";
                }
            }
        } else {
            return json(['code' => 0, 'msg' => '没有文件被上传']);
        }
    }
}