Flutter教程实现图片压缩与上传

在Flutter中实现图片压缩和上传时遇到几个问题：

  1. 选择图片后，如何有效压缩以减少文件大小？尝试过flutter_image_compress，但压缩后的质量损失较大，有没有更好的参数配置建议？

  2. 上传过程中，如何正确处理网络请求的异常（如超时或断网）？目前使用dio库，但失败后重传逻辑不太稳定。

  3. 能否提供一个完整的示例代码，涵盖从图片选择、压缩到上传的完整流程？尤其是如何处理多图批量上传的进度显示？

  4. 在Android/iOS上，压缩性能差异明显，是否有平台相关的优化方案？

3 回复

要实现图片压缩与上传，首先需要使用image_picker插件选择图片，再使用flutter_image_compress进行压缩。以下是基本步骤：

  1. 添加依赖：image_picker: ^0.8.6 和 flutter_image_compress: ^1.2.0 到pubspec.yaml。

  2. 获取图片：

import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();
XFile? image = await picker.pickImage(source: ImageSource.gallery);
  1. 压缩图片：
import 'package:flutter_image_compress/flutter_image_compress.dart';

Future<Uint8List?> compressImage(XFile image) async {
  final filePath = image.path;
  final result = await FlutterImageCompress.compressWithFile(
    filePath,
    quality: 88, // 设置压缩质量
  );
  return result;
}
  1. 上传图片：可以使用http库发送图片到服务器。
import 'package:http/http.dart' as http;

Future<void> uploadImage(Uint8List compressedImage) async {
  var request = http.MultipartRequest('POST', Uri.parse('https://example.com/upload'));
  request.files.add(http.MultipartFile.fromBytes('file', compressedImage, filename: 'compressed_image.jpg'));
  var response = await request.send();
  if (response.statusCode == 200) {
    print("Upload success!");
  } else {
    print("Upload failed");
  }
}

完成这些步骤后，你可以先选择图片、压缩，最后上传到服务器。记得处理异常和UI反馈。

更多关于Flutter教程实现图片压缩与上传的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现图片压缩和上传功能，你可以使用Flutter的插件image_picker来获取图片，再用flutter_image_compress来压缩图片，最后通过http库上传到服务器。

  1. 添加依赖：在pubspec.yaml中添加image_picker、flutter_image_compress和http。

  2. 获取图片：使用ImagePicker选择图片。

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

  3. 压缩图片：

    final compressedFile = await FlutterImageCompress.compressAndGetFile(
  pickedFile.path,
  './compressed.jpg',
  quality: 50, // 设置压缩质量
);

  4. 上传图片：使用http.MultipartRequest。

    final file = await compressedFile.readAsBytes();
final stream = http.ByteStream(Stream.castFrom(file));
final multipartFile = http.MultipartFile('file', stream, file.lengthSync(), filename: 'image.jpg');

final request = http.MultipartRequest('POST', Uri.parse('https://yourserver.com/upload'));
request.files.add(multipartFile);
final response = await request.send();
if (response.statusCode == 200) {
  print('上传成功');
}

注意处理异常和权限请求。完整代码需结合实际项目环境调整。

Flutter 图片压缩与上传实现教程

在 Flutter 中实现图片压缩和上传功能，可以使用以下步骤：

1. 添加所需依赖

dependencies:
  image_picker: ^1.0.4  # 用于选择图片
  flutter_image_compress: ^1.1.0  # 用于图片压缩
  dio: ^4.0.6  # 用于网络请求上传
  path_provider: ^2.0.11  # 用于获取文件路径
  path: ^1.8.2  # 路径处理

2. 实现代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
import 'package:dio/dio.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as path;

class ImageUploadPage extends StatefulWidget {
  @override
  _ImageUploadPageState createState() => _ImageUploadPageState();
}

class _ImageUploadPageState extends State<ImageUploadPage> {
  File? _image;
  bool _isUploading = false;

  Future<void> _pickImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      final file = File(pickedFile.path);
      final compressedFile = await _compressImage(file);
      
      setState(() {
        _image = compressedFile;
      });
    }
  }

  Future<File> _compressImage(File file) async {
    final tempDir = await getTemporaryDirectory();
    final targetPath = '${tempDir.path}/${path.basename(file.path)}_compressed.jpg';
    
    final result = await FlutterImageCompress.compressAndGetFile(
      file.absolute.path,
      targetPath,
      quality: 70,  // 压缩质量 (0-100)
      minWidth: 1080,  // 最小宽度
      minHeight: 1080,  // 最小高度
    );

    return File(result!.path);
  }

  Future<void> _uploadImage() async {
    if (_image == null) return;
    
    setState(() {
      _isUploading = true;
    });

    try {
      FormData formData = FormData.fromMap({
        "file": await MultipartFile.fromFile(_image!.path),
      });

      Dio dio = Dio();
      Response response = await dio.post(
        "https://your-api-endpoint.com/upload",  // 替换为你的上传API
        data: formData,
      );

      print("上传成功: ${response.data}");
    } catch (e) {
      print("上传失败: $e");
    } finally {
      setState(() {
        _isUploading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('图片压缩上传')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _image != null
                ? Image.file(_image!, height: 200)
                : Text("未选择图片"),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text("选择图片"),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isUploading ? null : _uploadImage,
              child: _isUploading ? CircularProgressIndicator() : Text("上传图片"),
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用说明

  1. _pickImage() 方法用于从相册选择图片
  2. _compressImage() 方法压缩图片，可以调整质量参数和尺寸
  3. _uploadImage() 方法使用 Dio 将图片上传到服务器

注意：需要将上传API地址替换为你自己的服务端地址。如需支持更多上传功能(如进度显示、更多参数等)，可以扩展 Dio 的配置。

回到顶部