Flutter图片处理与加载插件imagekit的使用

Imagekit SDK for Dart 允许您将图片上传到 Imagekit 服务器。它简化了在 Flutter 中使用 Imagekit 的过程，处理所有必要的任务。

特性

• 上传图片
• 添加标签
• 添加自定义元数据

开始使用

要使用此 SDK，您需要三个数据：

• 公共密钥
• URL 端点
• 身份验证端点

使用方法

要设置 Imagekit，您需要使用这些配置数据调用 setConfig 方法。

final imagekit = ImageKit.getInstance();
const config = Configuration(
  publicKey: '您的公共密钥',
  urlEndpoint: 'https://ik.imagekit.io/您的端点',
  authenticationEndpoint: 'http://您的服务器地址/imagekit/auth',
);
imagekit.setConfig(config);

要在任何地方上传图片，只需调用以下方法：

final data = await imagekit.upload(selectedImageFile);

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用程序中使用 Imagekit 插件进行图片选择和上传。

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

void main() {
  final imagekit = ImageKit.getInstance();
  const config = Configuration(
    publicKey: '您的公共密钥',
    urlEndpoint: 'https://ik.imagekit.io/您的公司名称',
    authenticationEndpoint: 'http://您的服务器地址/imagekit/auth',
  );
  imagekit.setConfig(config);
  runApp(const MaterialApp(home: HomePage()));
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final imagekit = ImageKit.getInstance();
  File? file;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例应用'),
      ),
      body: Column(
        children: [
          file != null ? Image.file(file!) : const SizedBox(),
          Visibility(
            visible: file != null,
            replacement: Center(
              child: ElevatedButton(
                onPressed: selectImage,
                child: const Text('选择图片'),
              ),
            ),
            child: Center(
              child: ElevatedButton(
                onPressed: uploadImage,
                child: const Text('上传图片'),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Future<void> selectImage() async {
    final xFile = await ImagePicker().pickImage(source: ImageSource.gallery);
    if (xFile == null) return;
    setState(() {
      file = File(xFile.path);
    });
  }

  Future<void> uploadImage() async {
    final selectedFile = file;
    if (selectedFile == null) return;
    const tags = ['rose', 'flower'];
    const bearerToken =
        'eyJhbGciOiJIUzI1NiJ9.eyJSb2xlIjoiVVNFUiIsIklzc3VlciI6Ik5TVEFDSyBJTkRJQSIsIlVzZXJuYW1lIjoieXQubnN0YWNrQGdtYWlsLmNvbSIsImV4cCI6MTY3MjcyNzU4NSwiaWF0IjoxNjcyNzI3NTg1fQ.vOVKKT-U8f6M4jU1kCb_zT1XFpFDvqeGQHUN_PtHVLQ';
    final image = await imagekit.upload(
      selectedFile,
      tags: tags,
      bearerToken: bearerToken,
    );
    // 文件 ID: image.fileId
    // 缩略图 URL: image.thumbnailUrl
    // 图片 URL: image.filePath
    print(image.toJson());
  }
}