Flutter Dio3.x版本上传图片提示 type '_File' is not a subtype of type 'String'

发布于 23 天前 作者 magege666 44 次浏览 最后一次编辑是 23 天前 来自 分享

1、Dio官方在2019年9月18后更新了Dio3.x版本,Dio 3.x为了支持Flutter Web,进行较大重构,上传文件的方法和以前的2.x不一样。

2、你可以直接用是2.x版本

如果你想按照大地老师的方法来上传图片的话,需要在安装依赖的时候指定Dio的版本

dio: 2.1.7

注意指定版本的时候没有^     

如果是 dio: ^2.1.7表示安装最新版本的Dio库

如果是 dio: 2.1.7 表示安装2.1.7的版本Dio库

3、如果你想用最新的Dio 3.x版本实现上传图片, 参考【源码-flutter_app_拍照 上传Dio3.x版本】的代码。

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

import 'package:dio/dio.dart';

class ImagePickerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImagePickerState();
  }
}

class _ImagePickerState extends State<ImagePickerPage> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ImagePicker"),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                onPressed: _takePhoto,
                child: Text("拍照"),
              ),
              RaisedButton(
                onPressed: _openGallery,
                child: Text("选择图库照片"),
              ),
              _buildImage()
            ],
          ),
        ));
  }

  /*拍照*/
  _takePhoto() async {
    var image =
        await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);

    setState(() {
      this._image = image;
    });

    this._uploadImage(image);
  }

  /*相册*/
  _openGallery() async {
    var image =
        await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 400);

    setState(() {
      this._image = image;
    });
  }

  //定义一个组件显示图片
  Widget _buildImage() {
    if (this._image == null) {
      return Text("请选择图片...");
    }
    return Image.file(this._image);
  }

  //上传图片
  _uploadImage(File _imageDir) async {
    
    //注意:dio3.x版本为了兼容web做了一些修改,上传图片的时候需要把File类型转换成String类型
   
    var fileDir=_imageDir.path;
       

    FormData formData = FormData.fromMap({
      "name": "zhangsna 6666666666",
      "age": 20,
      "sex": "男",    
      "file":  await MultipartFile.fromFile(fileDir, filename: "xxx.jpg")     
    });

    var response =
        await Dio().post("http://jd.itying.com/imgupload", data: formData);

    print(response);
  }
}
回到顶部