如何在Flutter中实现PDF文件上传至MySQL数据库？

一、整体架构说明 #

Flutter是客户端框架，无法直接操作MySQL数据库，必须通过后端API接口作为中间层，整体流程为：Flutter客户端 ↔ 后端API ↔ MySQL数据库。下面用上手快的Node.js做后端，配合Flutter实现一个简易的用户列表页面（从MySQL拉取数据展示）。

二、后端搭建（Node.js + Express + MySQL） #

1. 初始化项目并安装依赖

   mkdir flutter-mysql-backend && cd flutter-mysql-backend
   npm init -y
   npm install express mysql2 cors
   

2. 编写后端核心代码（server.js）

   const express = require('express');
   const mysql = require('mysql2');
   const cors = require('cors');
   const app = express();
   
   // 配置MySQL连接信息
   const db = mysql.createConnection({
     host: 'localhost',
     user: 'root', // 你的MySQL用户名
     password: '你的MySQL密码',
     database: 'flutter_demo' // 要创建的数据库名
   });
   
   // 连接数据库
   db.connect((err) => {
     if (err) throw err;
     console.log('MySQL连接成功');
   });
   
   app.use(cors());
   app.use(express.json());
   
   // 定义获取用户列表的接口
   app.get('/api/users', (req, res) => {
     const query = 'SELECT * FROM users';
     db.query(query, (err, results) => {
       if (err) throw err;
       res.json(results);
     });
   });
   
   const PORT = 3000;
   app.listen(PORT, () => {
     console.log(`后端服务运行在端口 ${PORT}`);
   });
   

3. 准备MySQL测试数据
   打开MySQL客户端，执行以下SQL语句创建数据库、表并插入测试数据：

   CREATE DATABASE flutter_demo;
   USE flutter_demo;
   CREATE TABLE users (
     id INT AUTO_INCREMENT PRIMARY KEY,
     name VARCHAR(50) NOT NULL,
     email VARCHAR(50) NOT NULL
   );
   -- 插入测试用户
   INSERT INTO users (name, email) VALUES ('张三', 'zhangsan@example.com'), ('李四', 'lisi@example.com');
   

4. 启动后端服务
   在终端执行：node server.js

三、Flutter客户端实现 #

1. 创建项目并添加依赖
   在pubspec.yaml的dependencies块中添加：

   http: ^1.1.0 # 用于请求后端API
   

   执行flutter pub get安装依赖

2. 编写用户列表页面代码（lib/main.dart）

   import 'dart:convert';
   import 'package:flutter/material.dart';
   import 'package:http/http.dart' as http;
   
   void main() => runApp(const MyApp());
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter + MySQL Demo',
         theme: ThemeData(primarySwatch: Colors.blue),
         home: const UserListPage(),
       );
     }
   }
   
   class UserListPage extends StatefulWidget {
     const UserListPage({super.key});
   
     @override
     State<UserListPage> createState() => _UserListPageState();
   }
   
   class _UserListPageState extends State<UserListPage> {
     List<dynamic> _users = [];
     bool _isLoading = true;
   
     @override
     void initState() {
       super.initState();
       _fetchUsers();
     }
   
     // 从后端接口拉取用户数据
     Future<void> _fetchUsers() async {
       try {
         // Android模拟器需把localhost换成10.0.2.2
         final response = await http.get(Uri.parse('http://localhost:3000/api/users'));
         if (response.statusCode == 200) {
           setState(() {
             _users = json.decode(response.body);
             _isLoading = false;
           });
         } else {
           throw Exception('请求失败');
         }
       } catch (e) {
         setState(() {
           _isLoading = false;
         });
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(content: Text('加载失败: $e')),
         );
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('用户列表')),
         body: _isLoading
             ? const Center(child: CircularProgressIndicator())
             : ListView.builder(
                 itemCount: _users.length,
                 itemBuilder: (context, index) {
                   final user = _users[index];
                   return ListTile(
                     title: Text(user['name']),
                     subtitle: Text(user['email']),
                   );
                 },
               ),
       );
     }
   }
   

3. 运行Flutter项目
   注意：Android模拟器需将接口地址中的localhost替换为10.0.2.2（模拟器对本地服务的映射地址），iOS模拟器可直接使用localhost。

四、核心注意事项 #

• 绝对不要在Flutter客户端硬编码MySQL账号密码，必须通过后端接口中转，避免数据泄露风险。
• 后端可替换为你熟悉的语言（如PHP、Java Spring Boot），核心是提供标准的RESTful接口供Flutter调用。
• 实际开发中还需完善错误处理、数据校验、状态管理等逻辑，上述代码为最基础的入门实现。

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