使用 Flutter 向 Flask API 发送 http Post-Request（包含图像）

Question

我已经在 CIFAR10 数据集上训练了一个 CNN（占位符，稍后将替换为不同的模型）并将该模型集成到一个烧瓶中 API。 API 托管在 Heroku 上，我现在想使用 Flutter / Dart 在我的 phone 上拍照，将它们发送到 Flask API，运行我训练有素基于它们建模并 return 预测。

使用 python，我可以轻松地向我的 API 和 return 预测发出 post 请求。这是我的简单 python 代码：

import requests
import json

img = open('some-picture.jpg', 'rb')

files = {'image': img}
response = requests.post("url_to_api", files=files)

print(response.text)

我使用 Flutter / Dart 的时间并不长，我了解到发出 htpp 请求的过程比 python 中的要复杂一些。有人可以给我一些指示或代码，让我可以用相机拍照，将其上传到我的 API，并将响应存储在变量中吗？这是我的（简化的）python 烧瓶代码 API:

from flask import Flask, request
import os
import numpy as np
from PIL import Image
from tensorflow import keras

app = Flask(__name__)
app.config["DEBUG"] = True

model = keras.models.load_model('cifar10_cnn.h5')
labels = ["Airplane", "Automobile", "Bird", "Cat", "Deer", "Dog", "Frog", "Horse", "Ship", "Truck"]


@app.route('/', methods=["POST"])
def predict():
    
    # stuff not relevant to question, left out for conciseness #
    
    file = request.files['image']

    image = Image.open(file).resize((32, 32))
    image = np.array(image)
    image = image / 255
    image = image.reshape(-1, 32, 32, 3)

    predictions = model.predict([image])
    index = np.argmax(predictions)
    results = {'Prediction:': labels[index]}

    return results

if __name__ == '__main__':
    app.run()

到目前为止，我知道多部分文件似乎是可行的方法，而且 Dio 包可能值得研究。如果可以提供进一步的提示或代码，我将不胜感激。

Answer 1

您可能已经知道如何从 gallery/camera 中选择图像（例如使用 image_picker 库）。您用该选择器的结果填充 class 字段，例如 File image;。这可能很简单：

import 'dart:io';
import 'package:image_picker/image_picker.dart';
class _MyHomePageState extends State<MyHomePage> {
  File image;
  final picker = ImagePicker();

  pickImageFromGallery(ImageSource source) async {
    final image = await picker.getImage(source: source);

    setState(() {
      this.image = File(image.path);
    });
  }
}

（更改 ImageSource source 以符合您的需求：相机或画廊）

然后您可以将该文件上传到您的 api。使用 http 库：

import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';

class _MyHomePageState extends State<MyHomePage> {
doUpload(){
    var request = http.MultipartRequest(
      'POST',
      Uri.parse("url_to_api"),
    );
    Map<String, String> headers = {"Content-type": "multipart/form-data"};
    request.files.add(
      http.MultipartFile(
        'image',
        image.readAsBytes().asStream(),
        image.lengthSync(),
        filename: "filename",
        contentType: MediaType('image', 'jpeg'),
      ),
    );
    request.headers.addAll(headers);
    print("request: " + request.toString());
    request.send().then((value) => print(value.statusCode));
}
}

对于这些库中的每一个，您都必须将它们作为依赖项添加到您的 flutter 项目中的 pubspec.yaml 中：

cupertino_icons: ^0.1.3
http: ^0.12.2
image_picker: ^0.6.7

Answer 2

我用 Django 和 Flutter 做过类似的工作。我用image_picker转select图片，用dio上传图片。

这是上传功能：

  _upLoadImage(File image) async {
    setState(() {
      loadingdone = false;
    });
    String path = image.path;
    var name = path.substring(path.lastIndexOf("/") + 1, path.length);
    var suffix = name.substring(name.lastIndexOf(".") + 1, name.length);
    FormData formData = FormData.fromMap({
        "img": await MultipartFile.fromFile(path,filename: name)
    });
    

    Dio dio = new Dio();
    var respone = await dio.post<String>("http://192.168.1.104:8000/uploadImg/", data: formData);
    if (respone.statusCode == 200) {
      Fluttertoast.showToast(
          msg: 'Done!',
          gravity: ToastGravity.BOTTOM,
          textColor: Colors.grey);
      setState(() {
          _label = jsonDecode(respone.data.toString())['label'];
          _score = jsonDecode(respone.data.toString())['score'];
          loadingdone = true;
      });
      
    }
  }

运行 select 图片后的上传功能：

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    _upLoadImage(image);
    setState(() {
      _image = image;
    });
  }

使用 Flutter 向 Flask API 发送 http Post-Request（包含图像）

Use Flutter to send a http Post-Request (containing an image) to a Flask API

api

http-post

dart

flutter

dio