Flutter图片上传功能插件flutter_image_uploading的使用

Flutter 图片上传功能插件 flutter_image_uploading 的使用

特性

通过使用此插件，我们可以轻松地从相册、文件管理器或相机中选择文件，并请求用户权限。

• 使用此插件时，可以获取用户同意从相册获取图片或从相机拍摄的图片。
• 您还可以获取文档文件。

开始使用

Android

在您的 <b>AndroidManifest.xml</b> 文件中添加权限。通常情况下，只需要向主版本添加权限即可。

<!-- Permissions options for the `storage` group -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<!-- Permissions options for the `camera` group -->
<uses-permission android:name="android.permission.CAMERA"/>

iOS

在您的 <b>Info.plist</b> 文件中添加权限。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
   <key>NSCameraUsageDescription</key>
   <string>允许访问摄像头以拍摄照片</string>
   
   <key>NSPhotoLibraryUsageDescription</key>
   <string>允许访问照片库以选择照片</string>
</dict>
</plist>

在您的 Podfile 文件中添加以下内容：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)

    target.build_configurations.each do |config|
      # You can remove unused permissions here
      # for more information: https://github.com/BaseflowIT/flutter-permission-handler/blob/master/permission_handler/ios/Classes/PermissionHandlerEnums.h
      # e.g. when you don't need camera permission, just add 'PERMISSION_CAMERA=0'
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',

        ## dart: PermissionGroup.camera
        'PERMISSION_CAMERA=1',
        ## dart: PermissionGroup.photos
        'PERMISSION_PHOTOS=1'
      ]
    end
  end
end

使用方法

调用以下函数：

void getImageFile() {
  ImageHelper().showPhotoBottomDialog(context, Platform.isIOS, (file) {
    setState(() {
      print("File=${file.toString()}");
      this.file = file;
    });
  },
  fileFormat: FileFormat.image, // 默认为图片
  );
}

如果您要上传视频，则可以将 fileFormat 设置为 FileFormat.video。

完整示例代码

以下是一个完整的示例代码，展示了如何使用该插件实现图片上传功能。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_image_uploading/flutter_image_uploading.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  void getImageFile() {
    ImageHelper().showPhotoBottomDialog(context, Platform.isIOS, (file) {
      setState(() {
        print("File=${file.toString()}");
        this.file = file;
      });
    },
    fileFormat: FileFormat.image,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              child: Text("File name = ${file?.path ?? ''}"),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImageFile,
        tooltip: '上传',
        child: const Icon(Icons.upload_file),
      ),
    );
  }
}