Flutter图片上传(Dio + Image_picker)

标签: Flutter  Dart

PS: 图片上传功能在项目中属于很常见的功能,网上也有蛮多图片上传的框架,看的眼花缭乱的。。。最后,本着自己最熟悉的才是最好的原则选择 Flutter Dio,所以项目中用的网络框架也是Flutter Dio ,直接拿来写个简单的demo,也算记录下Flutter踩坑心酸史吧。。。

  • 国际惯例(为了省事没做图片大小限制了。。。)

test.gif


废话不多说了,直接上代码,

  • 先添加两个依赖:

 

dio: any
flutter_picker: ^1.0.11

不熟悉dio的小伙伴可以去看看 Dio

  • 全部应用代码直接贴出来(dio可自行封装,这里只演示极简版)

 

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:image_picker/image_picker.dart';

class HeadImageUploadPage extends StatefulWidget {
  @override
  _HeadImageUploadPageState createState() => _HeadImageUploadPageState();
}

class _HeadImageUploadPageState extends State<HeadImageUploadPage> {
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    _upLoadImage(image);
    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: _image == null
            ? Text('No image selected.')
            : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }

  _upLoadImage(File image) async {
    String path = image.path;
    var name = path.substring(path.lastIndexOf("/") + 1, path.length);
    var suffix = name.substring(name.lastIndexOf(".") + 1, name.length);
    FormData formData = new FormData.from({
      "userId": "10000024",
      "file": new UploadFileInfo(new File(path), name,
          contentType: ContentType.parse("image/$suffix"))
    });

    Dio dio = new Dio();
    var respone = await dio.post<String>("/upload", data: formData);
    if (respone.statusCode == 200) {
      Fluttertoast.showToast(
          msg: "图片上传成功",
          gravity: ToastGravity.CENTER,
          textColor: Colors.grey);
    }
  }
}

 

版权声明:本文为weixin_42354735原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42354735/article/details/109515913

智能推荐

Flutter 中 image 图片组件

1. 图片的常用属性 1. alignment 对齐方式 。值为Alignment类型,如:Alignment.topCenter; 2. color 颜色。值为Colors类型,如:Colors.red; 3. colorBlendMode 颜色混合模式。要与color一起设置才有效果,值为BlendMode类型,如:BlendMode.darken; 4.&nbs...

ionic3以cordova-plugin-camera和cordova-plugin-image-picker插件实现拍照和从相册选取图片并用form表单上传

说明:拍照使用插件cordova-plugin-camera,从相册选取使用cordova-plugin-camera或者是cordova-plugin-image-picker。 安装:cordova-plugin-camera 安装:cordova-plugin-image-picker 点击头像,蹦出下面的选择弹窗。 html部分代码: ts代码:(下面代码主要是相册选取的弹窗的代码及插件的...

Flutter Image 图片显示样式 BoxFit

常见用法如下: 网络图片fit属性也实用 BoxFit.fill:充满父容器。 BoxFit.contain:尽可能大,保持图片分辨率。 BoxFit.cover:充满容器,可能会被截断。 BoxFit.none:图片居中显示,不改变分大小,可能会被截断。 BoxFit.fitWidth:图片填满宽度,高度可能会被截断 BoxFit.fitHeight:图片填满高度,宽度可能会被截断 BoxFit...

冒泡排序,及改进方式,性能优化400%>>>附图解加源码

首先源码附上,源码中带有注释,看不懂没关系,源码后面附带图解,最后附上代码效率提升图 源码如下: 方案一:其实实现很简单,两层循环,每次内层迭代出最大的一个值,将其放入数组最后一个位置,外层循环的末端便往前移一位。其原理如下图 方案一代码块: 方案二:优化改进 仔细观察上面的图,我们不难发现当迭代到图下这样的情况时,其实已经全排序好了,但是我们还是需要对它进行1,2,3,4,5,6的迭代,这些情况...

css3常用选择器

先介绍一下基本选择器,如下几种 *:通配符。选择页面的所有元素 E:元素选择器。对页面的一些元素进行选择,如p,div,li等 .class:类选择器 #id:id选择器。一个Id在一个页面中只能选择,这是和类选择器的区别 E F:后代选择器。如ul li。选中ul下的li E>F:子元素选择器。如下,可以用 h1 > strong {color:red;}使h1的子元素strong变...

猜你喜欢

python is not set from command line or npm configuration

问题 猜测原因  python版本冲突 解决方案  去官网找到最新版本python 点击下载,注意记住你下载的目录,下载好以后,打开这个目录下的文件夹,Python310, 整个文件夹复制一下 在项目里运行npm config list --json 找到python的路径   我的是 C:\\Python27\\python.exe 说明项目里用的还是py...

Java8 Stream流操作

前言 我们常常需要将一个容器转化成另一个容器,或是对这个容器中的数据进行批量处理,这时使用Stream流可以大大减少我们的工作量。 1 Stream概述 Java 8 是一个非常成功的版本,这个版本新增的Stream,配合同版本出现的 Lambda ,给我们操作集合(Collection)提供了极大的便利。 那么什么是Stream? Stream将要处理的元素集合看作一种流,在流的过程中,借助St...

带你玩转Visual Studio——带你跳出坑爹的Runtime Library坑

在Windows下进行C++的开发,不可避免的要与Windows的底层库进行交互,然而VS下的一项设置MT、MTd、MD和MDd却经常让人搞迷糊,相信不少人都被他坑过,特别是你工程使用了很多第三库的时候,及容易出现各种链接问题。看一下下面这个错误提示:  LIBCMT.lib(_file.obj) : error LNK2005: ___initstdio already defined...

git 设置 gitignore 忽略 __pycache__

清除git缓存中的pycache 直接删掉硬盘上的文件 如果我想保留硬盘上的这个文件,而只删除版本管理中的文件,就需要加入--cached参数。 切换分支出现问题 尽管我已经删除了__pycache__,硬盘也没有了,但是切换分支的时候依然是会提示本地重写的情况。 提示:需要我在切换分支之前,提交一次更新。 提交了更新之后,再来尝试切换分支,如下: 成功了,说明当做了任何变更之后,切换分支前需要执...

人生苦短,我用Python(二)— 爬取会议网站 EasyChair Smart CFP

寒假留校帮学长写了个爬虫,抓取会议网站上一些CFP信息。想着把一些知识点、坑点记下来,一来做个小总结给工作收收尾,二是以后再遇到好从容应对。 这是我写的第二个比较完善的爬虫了,比第一个要简单许多,完全过程化的代码,而且easychair这个网站页面布局比较友好,适合python新手、前端小白入门练习。但这个网站反爬比较厉害,写爬虫的过程中就被ban了好几次…… 制定抓取...