Flutter图片上传插件imgbb的使用

Flutter图片上传插件imgbb的使用

一个Dart包用于将图片上传到ImgBB。该包支持通过URL、文件和Base64数据上传图片，并具有适当的错误处理。

通过URL上传图片

var res = await uploader.uploadImageUrl(
    imageUrl: 'https://example.com/example.jpg', // 直接公开的URL
    name: 'example', // 文件名
    expiration: 600 // 图片过期时间（秒）
);
  • imageUrl: 直接公开的URL
  • name: 文件名
  • expiration: 图片过期时间（秒）

通过文件上传图片

var res = await uploader.uploadImageFile(
    imageFile: File('test/imgbb.png'), // 本地文件路径
    name: 'example', // 文件名
    expiration: 600 // 图片过期时间（秒）
);
  • imageFile: 本地文件路径
  • name: 文件名
  • expiration: 图片过期时间（秒）

通过Base64上传图片

var res = await uploader.uploadImageBase64(
    base64Image: '64XF//5600XRI==', // Base64编码的图像字符串
    name: 'example', // 文件名
    expiration: 600 // 图片过期时间（秒）
);
  • base64Image: Base64编码的图像字符串
  • name: 文件名
  • expiration: 图片过期时间（秒）

Getter

请在以下链接中找到所有get方法：示例

报告问题或提出建议

如果您遇到任何问题，欢迎在GitHub上提交问题。您的新想法总是受欢迎的。

版权和许可

版权所有 © 2024 Rohit Chouhan。根据MIT许可证授权。 所有版权保留至ImgBB.com。

完整示例Demo

void main() async {
    final uploader = Imgbb('API_KEY'); // 替换为您的API密钥
    var res = await uploader.uploadImageUrl(
        imageUrl: 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg', // 示例图片URL
        name: 'cat', // 文件名
        expiration: 600); // 图片过期时间（秒）

    if (uploader.isSuccessful()) { // 检查是否成功上传
        print('Image ID: ${res!.getId()}'); // 打印图像ID
        print('Title: ${res.getTitle()}'); // 打印标题
        print('File Name: ${res.getFileName()}'); // 打印文件名
        print('Image URL: ${res.getUrl()}'); // 打印图像URL
        print('Display URL: ${res.getDisplayUrl()}'); // 打印显示URL
        print('Delete URL: ${res.getDeleteUrl()}'); // 打印删除URL
        print('Thumbnail URL: ${res.getThumbnailUrl()}'); // 打印缩略图URL
        print('Medium URL: ${res.getMediumUrl()}'); // 打印中等大小URL
        print('Expiration: ${res.getExpiration().toString()}'); // 打印过期时间
        print('Time: ${res.getTime().toString()}'); // 打印时间戳
        print('Size: ${res.getSize().toString()}'); // 打印大小
        print('Width: ${res.getWidth().toString()}'); // 打印宽度
        print('Height: ${res.getHeight().toString()}'); // 打印高度
        print('Ext: ${res.getExtension()}'); // 打印扩展名
        print('Mime: ${res.getMime()}'); // 打印MIME类型
    } else {
        print('Failed to upload image.: ${uploader.getErrorMessage()}'); // 打印错误信息
    }
}

更多关于Flutter图片上传插件imgbb的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片上传插件imgbb的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，你可以使用 imgbb 插件来上传图片到 imgbb 图床。imgbb 是一个免费的图片托管服务，允许用户上传图片并获取图片的URL。

1. 获取 imgbb API Key

首先，你需要在 imgbb 上注册一个账号，并获取你的 API Key。你可以通过以下步骤获取 API Key：

  1. 登录到 imgbb。
  2. 进入 API 页面。
  3. 获取你的 API Key。

2. 添加依赖项

在 pubspec.yaml 文件中添加 http 依赖项，用于发送 HTTP 请求：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

然后在终端中运行 flutter pub get 来安装依赖项。

3. 实现图片上传功能

在 Flutter 项目中，你可以创建一个方法来上传图片到 imgbb。以下是一个简单的示例代码：

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

class ImageUploader extends StatefulWidget {
  @override
  _ImageUploaderState createState() => _ImageUploaderState();
}

class _ImageUploaderState extends State<ImageUploader> {
  File? _image;
  final ImagePicker _picker = ImagePicker();
  String? _imageUrl;

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

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  Future<void> _uploadImage() async {
    if (_image == null) return;

    final url = Uri.parse('https://api.imgbb.com/1/upload');
    final apiKey = 'YOUR_API_KEY_HERE'; // 替换为你的 imgbb API Key

    final request = http.MultipartRequest('POST', url)
      ..fields['key'] = apiKey
      ..files.add(await http.MultipartFile.fromPath('image', _image!.path));

    final response = await request.send();

    if (response.statusCode == 200) {
      final responseData = await response.stream.bytesToString();
      final jsonResponse = jsonDecode(responseData);

      setState(() {
        _imageUrl = jsonResponse['data']['url'];
      });
    } else {
      print('Failed to upload image. Status code: ${response.statusCode}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Upload to imgbb'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image == null
                ? Text('No image selected.')
                : Image.file(_image!, height: 200),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _uploadImage,
              child: Text('Upload Image'),
            ),
            SizedBox(height: 20),
            _imageUrl == null
                ? Text('No image uploaded yet.')
                : Image.network(_imageUrl!),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ImageUploader(),
));

4. 运行项目

现在，你可以运行你的 Flutter 项目。点击 “Pick Image” 按钮从相册中选择一张图片，然后点击 “Upload Image” 按钮将图片上传到 imgbb。上传成功后，图片的 URL 将显示在屏幕上。

5. 注意事项

  • 确保你已经替换了 YOUR_API_KEY_HERE 为你在 imgbb 上获取的 API Key。
  • http 包用于发送 HTTP 请求，image_picker 包用于从设备中选择图片。你可以根据需要添加 image_picker 依赖项：
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
  image_picker: ^0.8.4+4
回到顶部