Flutter实现将图片以Blob格式上传至MySQL数据库

完全可以实现，下面是具体的分步实现方案：

Flutter 前端实现 #

1. 添加依赖 #

在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4 # 用于调用相机拍照
  http: ^1.1.0 # 用于发送网络请求

执行flutter pub get安装依赖。

2. 配置权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加相机权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />

• iOS：在ios/Runner/Info.plist中添加相机权限描述：

<key>NSCameraUsageDescription</key>
<string>需要使用相机拍摄图片</string>

3. 实现拍照与上传逻辑 #

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;

class ImageUploadPage extends StatefulWidget {
  const ImageUploadPage({super.key});

  @override
  State<ImageUploadPage> createState() => _ImageUploadPageState();
}

class _ImageUploadPageState extends State<ImageUploadPage> {
  final ImagePicker _picker = ImagePicker();
  File? _imageFile;

  // 调用相机拍照
  Future<void> _takePhoto() async {
    final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
    if (photo != null) {
      setState(() {
        _imageFile = File(photo.path);
      });
      // 拍照完成后自动上传
      await _uploadImageAsBlob();
    }
  }

  // 将图片转为字节流并上传
  Future<void> _uploadImageAsBlob() async {
    if (_imageFile == null) return;

    try {
      // 读取图片文件的字节数据
      List<int> imageBytes = await _imageFile!.readAsBytes();
      
      // 发送POST请求到PHP后端接口
      final response = await http.post(
        Uri.parse('http://你的后端域名/upload_image.php'),
        headers: {'Content-Type': 'application/octet-stream'},
        body: imageBytes,
      );

      if (response.statusCode == 200) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('图片上传成功')),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('图片上传失败')),
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('上传出错: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('拍照上传Blob')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _imageFile != null
                ? Image.file(_imageFile!, width: 200, height: 200)
                : const Text('未拍摄图片'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _takePhoto,
              child: const Text('拍摄并上传'),
            ),
          ],
        ),
      ),
    );
  }
}

PHP 后端实现 #

创建upload_image.php文件，实现接收字节数据并插入数据库的逻辑：

<?php
// 处理跨域（按需添加）
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");

// 调整上传大小限制（按需设置）
ini_set('post_max_size', '20M');
ini_set('upload_max_filesize', '20M');

// 数据库配置
$servername = "你的数据库地址";
$username = "数据库用户名";
$password = "数据库密码";
$dbname = "数据库名称";

// 连接数据库
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 从请求体中读取图片字节数据
$imageData = file_get_contents('php://input');

if (empty($imageData)) {
    die("未接收到图片数据");
}

// 准备SQL语句（假设表名为images，blob字段名为image_blob）
$stmt = $conn->prepare("INSERT INTO images (image_blob) VALUES (?)");
// 绑定二进制参数
$stmt->bind_param("b", $imageData);

if ($stmt->execute()) {
    echo "图片已成功存入数据库";
} else {
    echo "存入失败: " . $stmt->error;
}

$stmt->close();
$conn->close();
?>

关键注意事项 #

1. 数据库表需提前创建，建议使用LONGBLOB类型存储图片（容量更大，支持大尺寸图片），示例建表语句：

CREATE TABLE images (
    id INT AUTO_INCREMENT PRIMARY KEY,
    image_blob LONGBLOB NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2. 若Flutter应用与PHP后端不在同一域名下，必须添加跨域头，否则请求会被浏览器拦截。
3. 如果上传大图片失败，检查PHP配置文件php.ini中的post_max_size、upload_max_filesize参数，确保值足够大。

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