Flutter:上传图片,选择相机或相册

配置SDK

image_picker: ^1.1.2

封装upload.dart
WPHttpService是封装的dio请求,
现在也是刚开始用,需要自行替换自己的上传方法。

import 'package:dio/dio.dart';
import 'dart:io';
import '../index.dart';

class UploadApi {
  /// 上传单张图片
  static Future<String> uploadImage(File file) async {
    // 创建 FormData
    String fileName = file.path.split('/').last;
    // 后端接收文件的参数名为 file
    FormData formData = FormData.fromMap({
      "file": await MultipartFile.fromFile(
        file.path,
        filename: fileName,
      ),
    });

    // 发送请求
    var res = await WPHttpService.to.post(
      '/api/uploadImage',
      data: formData,
      options: Options(
        contentType: "multipart/form-data",
      ),
    );
    print('接口原数据:${res.data}');
    // 假设接口返回图片URL
    return res.data['data']['url'] ?? '';
  }

  /// 上传多张图片
  static Future<List<String>> uploadImages(List<File> files) async {
    // 构建多文件上传
    var formList = [];
    for (var file in files) {
      String fileName = file.path.split('/').last;
      formList.add(await MultipartFile.fromFile(
        file.path,
        filename: fileName,
      ));
    }

    FormData formData = FormData.fromMap({
      "file": formList,  // 后端接收多个文件的参数名仍为 file
    });

    // 发送请求
    var res = await WPHttpService.to.post(
      '/api/uploadImage',
      data: formData,
      options: Options(
        contentType: "multipart/form-data",
      ),
    );
    
    // 假设接口返回图片URL列表
    List<String> urls = [];
    if (res.data['data'] != null) {
      for (var url in res.data['data']) {
        urls.add(url.toString());
      }
    }
    return urls;
  }
}

controller调用

import 'dart:io';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';

class UserinfoController extends GetxController {
  UserinfoController();
  File? avatarFile;
  // 定义选项列表
  final List<Map<String, dynamic>> actions = [
    {"id": 1, "title": "相机", "type": "camera"},
    {"id": 2, "title": "相册", "type": "gallery"},
  ];
  // 在控制器或页面中使用
  void showImagePicker(context) async{
    ActionSheetUtil.showActionSheet(
      context: context,
      title: '请选择',
      items: actions,
      onConfirm: (item) async {
        print('相机类型:${item['type']}');
        try{
          final file = await ImagePicker().pickImage(source: item['type'] == 'camera' ? ImageSource.camera : ImageSource.gallery);
          avatarFile = File(file!.path);
          print('选择的图片路径:${avatarFile!.path}');
          String imageUrl = await UploadApi.uploadImage(avatarFile!);
          print('上传图片接口返回:$imageUrl');
          update(["userinfo"]);
        }catch(e){
          print(e.toString());
        }
      },
    );
  }


  _initData() {
    update(["userinfo"]);
  }


  @override
  void onReady() {
    super.onReady();
    _initData();
  }
}

代码中showImagePicker参考这篇文章。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值