Flutter image_picker post上传图片答案

【问题标题】：Flutter image_picker post upload an imageFlutter image_picker post上传图片
【发布时间】：2018-05-06 08:11:44
【问题描述】：

我正在使用 Flutter 插件 Image_picker 选择图像，以便在选择图像后上传图像

Future<File> _imageFile;

  void _onImageButtonPressed(ImageSource source) async {
    setState(() {
      _imageFile = ImagePicker.pickImage(source: source);
    });
  }

我在flutter documentation 找到了这段代码，但它不起作用

var uri = Uri.parse("http://pub.dartlang.org/packages/create");
var request = new http.MultipartRequest("POST", url);
request.fields['user'] = 'nweiz@google.com';
request.files.add(new http.MultipartFile.fromFile(
    'package',
    new File('build/package.tar.gz'),
    contentType: new MediaType('application', 'x-tar'));
request.send().then((response) {
  if (response.statusCode == 200) print("Uploaded!");
});

【问题讨论】：

您将示例代码更改为什么？什么不工作？
我希望用户选择图库中的图像并将其发布到服务器

标签： dart flutter

【解决方案1】：

此代码可以正常工作。 使用MultipartRequest类

  void uploadImage() async {

      File _image;
      File pickedImage = await ImagePicker.pickImage(source: ImageSource.camera);

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


    // open a byteStream
    var stream = new http.ByteStream(DelegatingStream.typed(_image.openRead()));
    // get file length
    var length = await _image.length();

    // string to uri
    var uri = Uri.parse("enter here upload URL");

    // create multipart request
    var request = new http.MultipartRequest("POST", uri);

    // if you need more parameters to parse, add those like this. i added "user_id". here this "user_id" is a key of the API request
    request.fields["user_id"] = "text";

    // multipart that takes file.. here this "image_file" is a key of the API request
    var multipartFile = new http.MultipartFile('image_file', stream, length, filename: basename(_image.path));

    // add file to multipart
    request.files.add(multipartFile);

    // send request to upload image
    await request.send().then((response) async {
      // listen for response
      response.stream.transform(utf8.decoder).listen((value) {
        print(value);
      });

    }).catchError((e) {
      print(e);
    });
  }

命名空间：

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

【讨论】：

pickImage 折旧一个
flutter升级的时候会遇到这些问题。我会检查并发布新代码
只需使用 getImage 如下所示 :: final ImagePicker _picker = ImagePicker(); final PickedFile image = await _picker.getImage(source: ImageSource.camera, imageQuality: 50)
这很好用，但 DelegatingStream.typed 已被弃用！

【解决方案2】：

使用 MultipartRequest 类

Upload(File imageFile) async {    
    var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
      var length = await imageFile.length();

      var uri = Uri.parse(uploadURL);

     var request = new http.MultipartRequest("POST", uri);
      var multipartFile = new http.MultipartFile('file', stream, length,
          filename: basename(imageFile.path));
          //contentType: new MediaType('image', 'png'));

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

查看answer

【讨论】：

【解决方案3】：

如果希望上传函数返回服务器响应，可以使用toBytes()代替transform()，等待数据传输完成。

Future<String> upload() async {

  String responseString = '';

  // Pick image
  final image = await ImagePicker().getImage(
    source: ImageSource.gallery // or ImageSource.camera
    imageQuality: 100,
    maxWidth: 1000,
  );

  // Convert to File
  final file = File(image.path);
  // Set URI
  final uri = Uri.parse('URL');
  // Set the name of file parameter
  final parameter = 'Name';

  // Upload
  final request = http.MultipartRequest('POST', uri)
    ..files.add(await http.MultipartFile.fromPath(parameter, file.path));
  final response = await request.send();
  if (response.statusCode == 200) {
    responseString = String.fromCharCodes(await response.stream.toBytes());
  }

return responseString;
}

【讨论】：