Flutter图片选择后如何上传至Laravel后端并保存？

首先需要添加http依赖到pubspec.yaml：

dependencies:
  http: ^1.1.0
  file_picker: ^5.5.0 # 适配你的Flutter版本即可

修改按钮点击逻辑，将选中的图片转为MultipartFile并批量上传：

import 'package:http/http.dart' as http;
import 'package:file_picker/file_picker.dart';

// 假设已定义变量
FilePickerResult? result;
TextEditingController attachmentController = TextEditingController();
TextEditingController statusController = TextEditingController();

// 按钮点击事件逻辑
onPressed: () async {
  result = await FilePicker.platform.pickFiles(
    allowMultiple: true,
    type: FileType.image, // 可选：限制仅选择图片
  );

  if (result == null) {
    print("No file selected");
    return;
  }

  // 整理上传文件与文件名
  List<http.MultipartFile> imageFiles = [];
  List<String> fileNames = [];

  for (var file in result!.files) {
    final bytes = await file.readAsBytes();
    final multipartFile = http.MultipartFile.fromBytes(
      'images', // 对应后端接收的字段名
      bytes,
      filename: file.name,
    );
    imageFiles.add(multipartFile);
    fileNames.add(file.name);
  }

  // 更新前端状态
  setState(() {
    attachmentController.text = fileNames.join(', ');
    statusController.text = "uploading";
  });

  // 发送上传请求
  try {
    var request = http.MultipartRequest(
      'POST',
      Uri.parse('http://your-laravel-domain/api/upload-images'), // 替换为你的后端接口地址
    );
    request.files.addAll(imageFiles);

    var response = await request.send();
    if (response.statusCode == 200) {
      setState(() {
        statusController.text = "uploaded";
      });
      print("上传成功");
    } else {
      setState(() {
        statusController.text = "failed";
      });
      print("上传失败，状态码：${response.statusCode}");
    }
  } catch (e) {
    setState(() {
      statusController.text = "failed";
    });
    print("上传出错：$e");
  }
},

1. 定义路由 #

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

use App\Http\Controllers\ImageUploadController;

Route::post('/upload-images', [ImageUploadController::class, 'store']);

2. 创建并编写控制器 #

生成控制器：

php artisan make:controller ImageUploadController

控制器核心代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageUploadController extends Controller
{
    public function store(Request $request)
    {
        // 验证上传文件
        $request->validate([
            'images' => 'required|array',
            'images.*' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048', // 单文件限制2MB
        ]);

        $uploadedData = [];

        foreach ($request->file('images') as $image) {
            // 保存到public磁盘
            $path = $image->store('uploads/images', 'public');
            // 生成可访问URL
            $url = Storage::url($path);
            $uploadedData[] = [
                'filename' => $image->getClientOriginalName(),
                'storage_path' => $path,
                'access_url' => $url,
            ];
        }

        return response()->json([
            'success' => true,
            'data' => $uploadedData,
        ], 200);
    }
}

3. 配置可访问路径 #

为了让前端能访问上传的图片，执行软链接命令：

php artisan storage:link

该命令会将storage/app/public目录链接到public/storage，图片可通过http://your-domain/storage/uploads/images/xxx.jpg访问。

注意事项 #

• 确保storage/app/public/uploads/images目录存在且有写入权限
• 生产环境建议使用云存储（如S3）或CDN托管图片
• 可根据业务需求调整文件大小、格式限制

内容的提问来源于stack exchange，提问作者Mathew Garry Karrington