图片选择和上传，Flutter让它变得简单又好玩

站长

2023年07月23日 02:18 · 阅读数 16

我正在参加「掘金·启航计划」

嗨！这里是甜瓜看代码,今天我们来实现图片选择和上传。

图片选择

在Flutter中，要实现图片选择，我们可以使用 image_picker 这个插件。首先，我们需要在 pubspec.yaml 文件中引入插件：

dependencies:
  image_picker: ^0.8.7+4

然后，我们就可以使用 ImagePicker 这个类来实现图片选择了。下面是一个简单的示例：

import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();
final pickedFile = await picker.pickImage(source: ImageSource.gallery);

上面的代码首先创建了一个 ImagePicker 实例，然后调用 pickImage 方法来打开相册选择器。用户选择好图片后，我们就可以得到一个 PickedFile 对象，其中包含了所选图片的路径和其他信息。

如果你想要选择相机中的图片，可以将 source 参数改为 ImageSource.camera。此外，pickImage 方法还有一些其他参数，例如 maxHeight 和 maxWidth，可以用来限制所选择图片的大小。

图片上传

得到用户选择的图片之后，我们需要将它上传到服务器。这里，我们可以使用 http 这个插件来发送网络请求。

首先，我们需要在 pubspec.yaml 文件中引入 http 插件：

dependencies:
  http: ^0.13.5

然后，我们可以使用 http 中的 MultipartRequest 类来创建一个 multipart/form-data 格式的请求，将图片作为其中的一个部分。下面是一个简单的示例：

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

final request = http.MultipartRequest(
  'POST',
  Uri.parse('你的上传地址'),
);
request.files.add(await http.MultipartFile.fromPath(
  'image',
  pickedFile.path,
));
final response = await request.send();

上面的代码首先创建了一个 MultipartRequest 实例，然后将用户选择的图片作为其中的一个部分添加到请求中。最后，我们可以使用 send 方法将请求发送到服务器，并得到服务器的响应。

这里需要注意的是，我们需要使用 http.MultipartFile.fromPath 方法将图片转换成一个 MultipartFile 对象。这个对象中包含了文件名、文件类型和文件内容等信息。

完整示例

下面是一个完整的示例，展示了如何在Flutter中实现图片选择和上传功能：

import 'dart:io';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
     
   theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Image Upload Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? _imageFile;

  void _pickImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imageFile = File(pickedFile!.path);
    });
  }

  void _uploadImage() async {
    if (_imageFile == null) return;

    final request = http.MultipartRequest(
      'POST',
      Uri.parse('你的上传地址'),
    );
    request.files.add(await http.MultipartFile.fromPath(
      'image',
      _imageFile!.path,
    ));
    final response = await request.send();
    if (response.statusCode == 200) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Upload success!')),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Upload failed!')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _imageFile == null
            ? Text('No image selected.')
            : Image.file(_imageFile!),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: _pickImage,
            tooltip: 'Pick Image',
            child: Icon(Icons.add_a_photo),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: _uploadImage,
            tooltip: 'Upload Image',
            child: Icon(Icons.file_upload),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个 MyHomePage 类，包含了一个 File 类型的变量 _imageFile，用来保存用户选择的图片。我们通过 _pickImage 方法打开相册选择器，并将用户选择的图片保存到 _imageFile 中。然后，我们通过 _uploadImage 方法将 _imageFile 中的图片上传到服务器。

在页面中，我们展示了用户选择的图片，并通过两个 FloatingActionButton 按钮分别实现了图片选择和上传功能。

结语

在Flutter中实现图片选择和上传非常简单，只需要使用两个插件 image_picker 和 http 即可。如果你想要实现更复杂的图片处理功能，例如图片压缩、裁剪等，也可以使用其他插件来实现。希望这篇文章能帮助到大家！这里是甜瓜看代码，期待你的关注！