flutter 上傳圖片 image_picker 的使用

Github地址： https://github.com/flutter/plugins/tree/master/packages/image_picker

packages地址： https://pub.dev/packages/image_picker

 

一、將其添加到包的pubspec.yaml文件中：

image_picker: ^0.4.5

 

二、安裝

flutter pub get

 

三、導入

import 'package:image_picker/image_picker.dart';

 

四、上傳圖片的兩種方式

使用相機

var image = await ImagePicker.pickImage(source: ImageSource.camera);

使用圖庫

var image = await ImagePicker.pickImage(source: ImageSource.gallery);

 

五、上傳圖片

  _openGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    ShopPaperImgDao.uploadImg(image).then((res){
      if(res['code'] == 200){
        // 上傳成功
      }else{}
    }).catchError((e){
      print(e.toString());
    });
  }

 

ShopPaperImgDao.uploadImg 的方法

 

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

class ShopPaperImgDao {
  // 上傳圖片
  static Future uploadImg(imgfile) async{
    String path = imgfile.path;
    var name = path.substring(path.lastIndexOf("/") + 1, path.length);
    FormData formData = new FormData.from({
      "file": new UploadFileInfo(new File(path), name)
    });
    Response response;
    Dio dio =new Dio();
    response =await dio.post('後端接口',data: formData);
    if(response.statusCode == 200){
      return response.data;
    }else{
      throw Exception('後端接口異常');
    }
  }
}

 

六、結語

代碼裏面的 path，name，formData 可自行 print 查看。這裏就不一一講述了。

image_picker 自行查看 dart package 最新版本。

 

 

注意：

flutter pub get 以後可能須要從新 flutter run