Flutter图片上传(Dio + Image_picker)
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);
}
}
}
智能推荐
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了好几次…… 制定抓取...
