使用 post 请求将图片发送到服务器 api [FLUTTER]

Question

我想用我的手机拍照，应该只包含几个字母，然后将其发送到服务器，服务器会将图片转换为文本字符串。

我导入的包：

import 'dart:io';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';

我目前有这个拍照功能：

// Camera implementation
  File? _image;
  final ImagePicker _picker = ImagePicker();

  Future getImage() async {
    final image = await _picker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = File(image!.path);
    });
  }

我在这个按钮中使用它：

// Camera button
ElevatedButton.icon(
   onPressed: getImage,
   icon: const Icon(Icons.camera_alt_rounded),
   label: const Text('Scan'),
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.green[500]),
     textStyle: MaterialStateProperty.all(const TextStyle(fontSize: 26)),
   )
)

我已经测试了只向 jsonplaceholder 发送一些数据并且它可以工作，但我无法理解如何将它实现到应该发送到我的服务器的图片。

// Send Data to the Server (TEST VERSION)
postDataTest() async{
  try{
  var response = await http.post(Uri.parse("https://jsonplaceholder.typicode.com/posts"),
      body: {
        "id": 1.toString(),
        "name": "Hax",
      }
  );
  print(response.body);
  } catch(e){
    print(e);
  }
}

TLDR。我想拍照并发送到服务器。

Answer 1

使用多部分

Upload(File img) async {    

  var uri = Uri.parse(uploadURL);

 var request = new http.MultipartRequest("POST", uri);
  request.files.add( new http.MultipartFile.fromBytes("file", img.readAsBytesSync(), filename: "Photo.jpg", contentType: new MediaType("image", "jpg"))); 
      


  var response = await request.send();
  print(response.statusCode);
  response.stream.transform(utf8.decoder).listen((value) {
    print(value);
  });
}

Answer 2

Picture to text 要存档，您需要将图像转换为 base64。检查这个link

但是，在数据库中存储大量二进制数据通常不是一个好主意。您最终会浪费带宽传输数据。它还会在您读取大型 blob 数据时降低移动应用程序的性能。你不需要以及不必要的编码和解码。

您可以使用multipart api请求将图片发送到服务器。

因此您可以使用各种包中的 api 归档多部分请求

1. https - dart documentation
2. Dio

您也可以在 Stackoverflow 上查看multipartRequest。

Answer 3

我设法用这个函数解决了它：

// Upload camera photo to server
Future uploadImage() async {
  final uri = Uri.parse("url to the server");
  var request = http.MultipartRequest('POST', uri);
  var takenPicture = await http.MultipartFile.fromPath("image", _image!.path);
  request.files.add(takenPicture);

  var response = await request.send();
  if(response.statusCode == 200){
    print('Image uploaded!');
  } else{
    print('Image not uploaded');
  }
}