如何在Flutter应用与Django服务器之间发送（或上传）图像？

Question

我想了解一下大概的流程，怎么从一个Flutter应用（支持.jpg或.png格式的图片）上传一张图片到Django服务器，这样服务器就可以对这张图片进行分类并返回结果。同时，我也想知道当用户在Flutter应用中发起一个获取请求时，怎么从服务器发送数据（我只需要一些指导）。

我还没有尝试过，因为我不知道从哪里开始。

Answer 1

使用 image_picker 这个工具包，可以让用户从他们设备的相册或相机中选择一张图片。

接着，导入 http 这个工具包，并从选中的图片文件创建一个 MultipartFile 对象。

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

Future<http.MultipartRequest> createMultipartRequest(String url, File image) async {
  final request = http.MultipartRequest(
    'POST',
    Uri.parse(url),
  );
  request.files.add(http.MultipartFile.fromPath('image', image.path));
  return request;
}

然后，利用 http 这个工具包，把这个多部分请求发送到你的 Django 服务器的接口上。处理服务器的响应（比如，图片分类的结果），并在 Flutter 应用中显示出来。

Future<String?> uploadImage(String url, File image) async {


final request = await createMultipartRequest(url, image);
  final streamedResponse = await request.send();
  final response = await http.Response.fromStream(streamedResponse);

  if (response.statusCode == 200) {
    final responseData = jsonDecode(response.body); // Parse response if using JSON
    return responseData['classification_result']; // Example assuming JSON response
  } else {
    print('Error: ${response.reasonPhrase}');
    return null;
  }
}

// Usage
void onUploadButtonPressed() async {
  final imageFile = await pickImage();
  if (imageFile != null) {
    final result = await uploadImage('http://your-server-address/upload', imageFile);
    if (result != null) {
      // Display classification result (e.g., in a Text widget)
    } else {
      // Handle upload error
    }
  }
}

如果你想把一张图片从 Flutter 应用上传到 Django 服务器，可以按照以下步骤进行：

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

Future<void> uploadImage(File imageFile) async {
  var request = http.MultipartRequest(
      'POST', Uri.parse('http://your-django-server.com/upload_image_endpoint'));
  request.files.add(await http.MultipartFile.fromPath('image', imageFile.path));

  var response = await request.send();
  if (response.statusCode == 200) {
    print('Image uploaded successfully');
  } else {
    print('Failed to upload image: ${response.reasonPhrase}');
  }
}