调用原生硬件 Api 实现照相机 拍照和相册选择 以及拍照上传
//上传图片
_uploadImage(_imageDir) async{
FormData formData = new FormData.from({
"name": "zhangsna 6666666666",
"age": 20,
"sex":"男",
"file":new UploadFileInfo(_imageDir, "xxx.jpg"),
});
var response = await Dio().post("http://jd.itying.com/imgupload", data: formData); print(response);
}
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:dio/dio.dart'; class CameraPage extends StatefulWidget{
CameraPage({Key key});
_CameraPage createState() => _CameraPage();
} class _CameraPage extends State {
var cameraImg;
var albumImg; // 相机
getCameraImg() async {
var camera = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 100);
uploadImg(camera);
setState(() {
cameraImg = camera;
});
}
// 相册
getAlbumImg() async {
var album = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 100);
setState(() {
albumImg = album;
});
}
// 上传图片
uploadImg(File imgUrl) async {
var path = imgUrl.path;
var formData = FormData.fromMap({
"name": "wendux",
"age": 25,
"file": MultipartFile.fromFileSync(path, filename: "upload.img")
});
var response = await Dio().post("https://pub.dev/packages/dio", data: formData);
print(response);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('设备硬件')
),
body: ListView(
children: <Widget>[
RaisedButton(child: Text('相机 上传图片'), onPressed: () {
getCameraImg();
}),
cameraImg == null ? SizedBox(height: 0) : Container(
height: 100,
child: Image.file(cameraImg),
),
RaisedButton(child: Text('相册'), onPressed: getAlbumImg),
albumImg == null ? SizedBox(height: 0) : Container(
height: 100,
child: Image.file(albumImg),
)
],
)
);
}
}
调用原生硬件 Api 实现照相机 拍照和相册选择 以及拍照上传的更多相关文章
- Ionic4 Cordova 调用原生硬件 Api 实现扫码功能
QR Scanner 速度快,样式随心所欲,默认只能扫二维码 https://ionicframework.com/docs/native/qr-scanner/ 安装插件 ionic cordova ...
- IOS研究院之打开照相机与本地相册选择图片(六)
原创文章如需转载请注明:转载自雨松MOMO程序研究院本文链接地址:IOS研究院之打开照相机与本地相册选择图片(六) Hello 大家好 IOS的文章好久都木有更新了,今天更新一篇哈. 这篇文章主要学习 ...
- FastDFS的配置、部署与API使用解读(2)以字节方式上传文件的客户端代码(转)
本文来自 诗商·柳惊鸿 Poechant CSDN博客,转载请注明源地址:FastDFS的配置.部署与API使用解读(2)上传文件到FastDFS分布式文件系统的客户端代码 在阅读本文之前,请您先通过 ...
- HTML5 Plus 拍照或者相册选择图片上传
HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera.Gallery.IO.Storage和Uploader来实现手机APP拍照或者从相册 ...
- 转:【微信小程序】 微信小程序-拍照或选择图片并上传文件
调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobj ...
- IOS研究院之打开照相机与本地相册选择图片
如下图所示 在本地相册中选择一张图片后,我们将他拷贝至沙盒当中,在客户端中将它的缩略图放在按钮旁边,这个结构其实和新浪微薄中选择图片后的效果一样.最终点击发送将按钮将图片2进制图片上传服务器. 下面我 ...
- FastDFS的配置、部署与API使用解读(8)FastDFS多种文件上传接口详解(转)
1.StorageClient与StorageClient1的区别 相信使用happy_fish的FastDFS的童鞋们,一定都熟悉StorageClient了,或者你熟悉的是StorageClien ...
- MUI 单个图片上传预览(拍照+系统相册):先选择->预览->上传提交
1 html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
随机推荐
- 使用Dockerfile构建镜像命令自己的理解
1.FROM 基于那个基础命令开始构建镜像,我的理解就是选择一个操作系统 2.CMD 里面放的是指定一个容器启动时要运行的命令 3.ENTRYPOINT 类似于CDM命令,不过 docker run ...
- 使用nohup不产生log文件方法
思想 无法阻止nohup产生日志可以将其定向到空文件实现 实现 $ nohup xxx >/dev/null 2>&1 &
- 在阿里云IIS服务器上安装证书
在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...
- 跨域请求问题:CORS
1.编写过滤器类:需要实现Filter接口,并重写三个方法: (1)先设置字符编码: request.setCharacterEncoding("utf-8"); response ...
- 记录 Docker 的学习过程 (数据挂载)
docker 存储篇 容器中的存储是分层的, 在容器中,如果我们要创建一个文件,会在文件的最上层(可写层)创建 容器中内置的文件,默认来讲是只读的,只有自己创建的文件才是可写状态 比如说 /etc/p ...
- ubuntu 开启对.htaccess的支持
1. 终端运行 sudo a2enmod 程序提示可供激活的模块名称,输入: rewrite 成功会提示 rewrite already load2. 修改/etc/apach ...
- Angular项目目录
0.模块介绍和基础知识 https://cloud.tencent.com/developer/section/1489514 1.如下图VSCode-- node_modules 第三方依赖包存放目 ...
- PHP返回json数据为null
文件编码非utf-8,导致json_encode()返回false:最后前台ajax接收不到数据
- Initialization of bean failed; nested exception is java.lang.NoClassDefFoundError: org/objectweb/asm/Type
问题描述 将项目挂载到 Myeclipse 的 tomcat 上,启动 tomcat ,报错“Initialization of bean failed; nested exception is ja ...
- 解决pjax重复绑定
个人博客 地址:http://www.wenhaofan.com/article/20180929002529 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会 ...