flutter 使用image_picker获取图片并上传

注意看代码中的注释

1、所要用到的package

import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:http_parser/http_parser.dart'; // 这个是后面要用到的MediaType
import 'package:image_picker/image_picker.dart';
import '../common/dio_http.dart'; // 这个是我个人封装的dio.post

2、dio的封装

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

class DioHttp {
  static var _baseUrl = 'http://192.168.3.30:9001/api/';
  static Dio _dio = Dio(
      BaseOptions(
        baseUrl: _baseUrl,
      )
  );

  static Future<String> upload(param) async {
    String method = 'upload';
    Response response = await _dio.post(_baseUrl + method, data: FormData.fromMap(param));
    return response.data.toString();
  }
}

3、image_picker获取图片

late XFile? _image = null;
ImagePicker _imagePicker = ImagePicker();
// 从相册中获取
Future _getImageFromGallery() async {
  var image = await _imagePicker.pickImage(source: ImageSource.gallery);

  setState(() {
    _image = image;
  });
}

4、上传功能函数

Future _uploadToServe() async {
  var imagePath = _image!.path;
  var name = _image!.name;
  var suffix = name.substring(name.lastIndexOf(".") + 1, name.length);
  // 一定要加await 否则服务端收到的file就是一个字符串
  var file = await MultipartFile.fromFile(imagePath,
      filename: name,
      contentType: MediaType("image" , suffix)
  );
  await DioHttp.upload({
    'name': _image!.name,
    'file': file,
  }).then((value) {
    print(value);
  });
}

5、服务端接收图片并保存

from flask import make_response, jsonify, request
# 这里两个是自定义的封装
from frame.api import api
from frame.debug import logger

@api.route("/upload", methods=['GET', 'POST'])
def upload():
    # 获取发过来的数据，result只有'name'字段，没有'file'字段
    result = request.form.to_dict()
    logger.info(result)
    # 'file'字段通过这里获取
    f = request.files['file']
    filename = f.filename;
    f.save(filename)
    return '{status: "ok"}'