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

Posted 2023-02-19

【中文标题】使用 post 请求将图片发送到服务器 api [FLUTTER]

【英文标题】：Send picture to server api with post request [FLUTTER]

【发布时间】：2021-12-25 18:58:24

【问题描述】：

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

我导入的包：

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。我想拍照并发送到服务器。

【参考方案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);
  );

【讨论】：

谢谢！我已经更改为我的“uploadURL”并导入了http_parser包，但是我仍然有点迷茫我应该如何使用这个功能将拍摄的图片直接上传到我的服务器。我对颤振和飞镖很陌生，所以这有点先进。 :)

使用名为 image picker 或 file picker 的插件。它允许您从画廊或相机中挑选图像。完成选择图像文件后，将该文件传递给我的答案中编写的方法。

request.files.add( new http.MultipartFile.fromBytes("file", ... 如果我理解正确，我需要将“file”更改为我的图像名称并将该变量传递给Upload() 函数？

谢谢，经过一些修改，我设法解决了。

不错。很高兴你解决了。如果有帮助请采纳我的回答

【参考方案2】：

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

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

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

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

https - dart documentation Dio

您也可以在 *** 上查看multipartRequest。

【参考方案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');
  

【讨论】：

在下面添加这一行 var response = await.request.send(); response.stream.transform(utf8.decoder).listen((value) print(value); );

谢谢，感谢您的帮助！我使用了那条线+导入'dart：convert'。介意向我解释 utf8.decoder 的含义吗？另外，您是否建议我将 JSON 数据转换为 JavaObject，以便我以后可以更轻松地使用它与应用用户进行通信？

Utf8 是一个整数列表。要将其转换为可读字符串，我们使用 utf8 解码。更多信息，请查看api.flutter.dev/flutter/dart-convert/Utf8Decoder-class.html