Flutter图片上传至服务器插件easyupload_image_toserver的使用

Flutter 图片上传至服务器插件 easyupload_image_toserver 的使用

特性

本 Flutter 插件适用于 Web、Android 和 iOS 平台，用于轻松上传图片到服务器，并处理错误。

开始使用

首先，你需要在 pubspec.yaml 文件中添加 easyupload_image_toserver 依赖项：

dependencies:
  easyupload_image_toserver: ^版本号

然后运行 flutter pub get 命令来获取该包。

使用方法

对于 Android 和 iOS
import 'package:flutter/material.dart';
import 'package:easyupload_image_toserver/easyupload_image_toserver_mob.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    UploadImageforPhone upload = UploadImageforPhone();

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.blue,
        title: const Text(
          '测试上传',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Container(
        child: Column(
          children: [
            Center(
              child: MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  // 从相册选择图片
                  upload.selectFromGallary();
                  // 从相机拍摄图片
                  upload.selectFromCam();
                },
                child: const Text('上传'),
              ),
            ),
            Center(
              child: MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  // 仅上传图片
                  upload.uploadToServerWithImageWithOnly(
                    'https://example.net/testupload.php', // API 链接
                    'file', // 请求中的图片名称
                    {} // 如果存在则为 API 头
                  );
                  // 上传图片并携带请求体
                  upload.uploadToServerWithImageWithBody(
                    'https://example.net/testupload.php', // API 链接
                    'file', // 请求中的图片名称
                    {"key": "value"}, // 请求体
                    {} // 如果存在则为 API 头
                  );
                },
                child: const Text('上传'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
对于 Web
import 'package:easyupload_image_toserver/easyupload_image_toserver.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    UploadImageforWeb upload = UploadImageforWeb();

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.blue,
        title: const Text(
          '测试上传',
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Container(
        child: Column(
          children: [
            Center(
              child: MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  // 从相册选择图片
                  upload.selectedImageFromWeb();
                },
                child: const Text('上传'),
              ),
            ),
            Center(
              child: MaterialButton(
                color: Colors.blue,
                onPressed: () {
                  // 仅上传图片
                  upload.uploadFileToServer(
                    'https://example.net/testupload.php', // API 链接
                    'file', // 请求中的图片名称
                    {} // 如果存在则为 API 头
                  );
                  // 上传图片并携带请求体
                  upload.uploadFileToServerWithBody(
                    'https://example.net/testupload.php', // API 链接
                    'file', // 请求中的图片名称
                    {"key": "value"}, // 请求体
                    {} // 如果存在则为 API 头
                  );
                },
                child: const Text('上传'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个使用 easyupload_image_toserver 插件将 Flutter 图片上传至服务器的代码示例。

首先，确保你已经在 pubspec.yaml 文件中添加了 easyupload_image_toserver 依赖：

dependencies:
  flutter:
    sdk: flutter
  easyupload_image_toserver: ^最新版本号  # 请替换为实际最新版本号

然后，运行 flutter pub get 来安装依赖。

接下来，编写一个 Flutter 应用来演示如何使用 easyupload_image_toserver 插件。

1. 导入必要的包

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:easyupload_image_toserver/easyupload_image_toserver.dart';

2. 创建一个 Flutter 应用

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

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

3. 创建图片上传页面

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

class _ImageUploadPageState extends State<ImageUploadPage> {
  final ImagePicker _picker = ImagePicker();
  File? _imageFile;
  String? _uploadUrl;

  Future<void> _pickImage() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        _imageFile = File(image.path);
      });
    }
  }

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

    String serverUrl = 'https://your-server-url/upload';  // 替换为你的服务器上传接口

    try {
      final response = await EasyUploadImageToServer().uploadImage(
        filePath: _imageFile!.path,
        serverUrl: serverUrl,
      );

      setState(() {
        _uploadUrl = response.data;  // 假设服务器返回图片的URL
      });

      print('Upload Success: $_uploadUrl');
    } catch (e) {
      print('Upload Failed: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Upload Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _imageFile == null
                ? Text('No image selected.')
                : Image.file(_imageFile!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _uploadImage,
              child: Text('Upload Image'),
            ),
            if (_uploadUrl != null)
              SizedBox(height: 20),
            if (_uploadUrl != null)
              Text('Uploaded Image URL: $_uploadUrl'),
          ],
        ),
      ),
    );
  }
}

4. 注意事项

  • 权限：确保在 Android 和 iOS 上请求了必要的存储权限。
  • 服务器：服务器需要处理文件上传请求并返回相应的响应（例如上传成功后的图片URL）。
  • 错误处理：在实际应用中，你可能需要更详细的错误处理逻辑。

5. 运行应用

确保你的开发环境已经正确配置，然后运行 Flutter 应用。你应该能够选择一张图片并上传到服务器，服务器返回的 URL 将会显示在屏幕上。

希望这个示例对你有帮助！如果你有任何进一步的问题，请随时提问。

回到顶部