如何在Flutter与Laravel中通过HTTP和JSON实现多图片上传？

Laravel 端完善与修复 #

1. 补全控制器方法定义 #

你的现有代码只是方法体，需要补全完整的控制器类和方法：

<?php

namespace App\Http\Controllers;

use App\Models\Photo;
use Illuminate\Http\Request;

class PhotoController extends Controller
{
    public function uploadImages(Request $request)
    {
        $request->validate([
            'apartment_id' => 'required|exists:apartments,id',
            'images' => 'required|array',
            'images.*' => 'image|mimes:jpeg,png,jpg|max:2048',
        ]);

        $apartmentId = $request->input('apartment_id');
        $images = $request->file('images');
        $uploadedImageIds = [];

        foreach ($images as $image) {
            // 使用public磁盘存储，方便前端访问
            $path = $image->store('apartments', 'public');

            $photo = new Photo();
            $photo->apartment_id = $apartmentId;
            $photo->url = $path;
            $photo->save();

            $uploadedImageIds[] = $photo->id;
        }

        return response()->json([
            'message' => 'Images uploaded successfully',
            'image_ids' => $uploadedImageIds,
            'base_url' => asset('storage/') // 返回基础URL，方便前端拼接完整图片地址
        ]);
    }
}

2. 配置API路由 #

在 routes/api.php 中添加路由：

use App\Http\Controllers\PhotoController;

Route::post('/photo/uploadImages', [PhotoController::class, 'uploadImages']);

3. 配置存储与公共访问 #

执行命令创建存储软链接，让public目录下的文件可以被外部访问：

php artisan storage:link

4. 测试端点 #

先用Postman或类似工具测试API：

• 请求方式：POST
• URL：http://your-domain/api/photo/uploadImages
• Form-data参数：
  • apartment_id: 你的公寓ID（需存在于apartments表）
  • images: 选择多张图片（键名保持images，不要加[]，Laravel会自动识别数组）

Flutter 端完善与修复 #

1. 传递公寓ID到AddImages页面 #

修改AddImages组件的构造函数，接收apartment_id：

class AddImages extends StatefulWidget {
  final int apartmentId; // 添加此行
  const AddImages({super.key, this.title, required this.apartmentId}); // 修改构造函数
  final String? title;

  @override
  State<AddImages> createState() => _AddImagesState();
}

2. 更新上传函数，包含apartment_id #

修改uploadImages方法，添加apartment_id参数并加入请求：

Future<void> uploadImages(List<XFile> imageFiles, int apartmentId) async {
  try {
    var request = http.MultipartRequest(
      'POST',
      Uri.parse('http://10.0.2.2:8000/api/photo/uploadImages'),
    );

    // 添加apartment_id参数
    request.fields['apartment_id'] = apartmentId.toString();

    for (var imageFile in imageFiles) {
      var multipartFile = await http.MultipartFile.fromPath(
        'images', // Laravel端用images即可，无需[]
        imageFile.path,
      );
      request.files.add(multipartFile);
    }

    var response = await request.send();
    var responseData = await http.Response.fromStream(response);

    if (response.statusCode == 200) {
      print('Images uploaded successfully');
      // 上传成功后导航到下一步
      Get.to(FourthStep());
    } else {
      print('Image upload failed: ${responseData.body}');
      // 显示错误提示
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('上传失败: ${responseData.body}')),
      );
    }
  } catch (e) {
    print('Upload error: $e');
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('网络错误，请重试')),
    );
  }
}

3. 修改"تم"按钮点击逻辑 #

更新checkArray方法，触发上传而不是直接导航：

void checkArray() {
  if (_imageFileList != null && _imageFileList!.isNotEmpty) {
    // 显示加载提示
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(child: CircularProgressIndicator()),
    );
    // 调用上传函数
    uploadImages(_imageFileList!, widget.apartmentId).then((_) {
      Navigator.pop(context); // 关闭加载弹窗
    });
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请至少选择一张图片')),
    );
  }
}

4. 修复对话框样式问题 #

你的fullButton样式未定义，替换为默认样式或自定义：

ElevatedButton(
  // style: fullButton, // 注释或替换为自定义样式
  child: const Text('إضافة'),
  onPressed: () {
    // ...原有逻辑
  },
),

完整流程测试 #

1. 在Flutter中，从公寓创建页面传递apartment_id到AddImages页面：

// 示例导航代码
Get.to(AddImages(apartmentId: yourApartmentId));

2. 选择图片后点击"تم"按钮，触发上传
3. 上传成功后自动跳转到FourthStep页面，同时Laravel数据库中会新增对应的Photo记录

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