Flutter选择多张图片上传

之前发过一篇上传多张图片的博客，那个是自己实现的，但是是一张一张上传最后页面上显示出来所有上传的图片，这篇文章介绍一下一次性选择多张图片并上传

首先引入依赖：multi_image_picker，这个插件可以选择多张图片，插件地址https://pub.flutter-io.cn/packages/multi_image_picker

然后画个小页面

import 'package:flutter/material.dart';
import 'dart:io';
//ByteData这里需要引入dart:typed_data文件，引入service.dart的话app里可以检索到文件个数，但是传递到后台一直是null，时间紧迫我也没抓包看是咋回事儿先这么用吧
import 'dart:typed_data';
import 'package:dio/dio.dart';
//MediaType用
import 'package:http_parser/http_parser.dart';
import 'package:multi_image_picker/multi_image_picker.dart';class TestPage extends StatefulWidget {final arguments;TestPage({Key key, this.arguments}) : super(key : key);_TestPageState createState() => _TestPageState(this.arguments);
}class _TestPageState extends State<TestPage> {final arguments;_TestPageState(this.arguments);//上传图片用ScrollController _imgController = new ScrollController();List<Asset> _img = new List<Asset>();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(leading: InkWell(child: Icon(Icons.keyboard_return),onTap: (){Navigator.pop(context);},),title: Text("上传照片"),),body: Padding(padding: EdgeInsets.all(10),child: Column(children: [Row(children: <Widget>[this._img == null ? Expanded(flex: 1,child: Text(""),) : Expanded(flex: 1,child: Container(width: double.infinity,height: 50,child: ListView.builder(controller: _imgController,shrinkWrap: true,scrollDirection: Axis.horizontal,itemCount: this._img.length,itemBuilder: (context, index){return Container(width: 50,height: 50,margin: EdgeInsets.only(right: 10),decoration: BoxDecoration(borderRadius: BorderRadius.circular(4.0),border: Border.all(style: BorderStyle.solid,color: Colors.black26,)),child: AssetThumb(asset: this._img[index],width: 50,height: 50,),);},),),),InkWell(child: Container(width: 50,height: 50,margin: EdgeInsets.only(right: 10),decoration: BoxDecoration(borderRadius: BorderRadius.circular(4.0),border: Border.all(style: BorderStyle.solid,color: Colors.black26,)),child: Center(child: Icon(Icons.camera_alt),),),onTap: _openGallerySystem ,)],),Container(width: double.infinity,height: 80,child: RaisedButton(color: Colors.blue,child: Text("提交",style: TextStyle(color: Colors.white),),onPressed: () {_submitData();},),),],)),);}//选择文件上传void _openGallerySystem () async {List<Asset> resultList = List<Asset>();resultList = await MultiImagePicker.pickImages(//最多选择几张照片maxImages: 9,//是否可以拍照enableCamera: true,selectedAssets: _img,materialOptions:MaterialOptions(startInAllView:true,allViewTitle:'所有照片',actionBarColor:'#2196F3',//未选择图片时提示textOnNothingSelected:'没有选择照片',//选择图片超过限制弹出提示selectionLimitReachedText: "最多选择9张照片"),);if (!mounted) return;setState(() {_img = resultList;});}//提交数据void _submitData () async {//处理图片List<MultipartFile> imageList = new List<MultipartFile>();for (Asset asset in _img) {//将图片转为二进制数据ByteData byteData = await asset.getByteData();List<int> imageData = byteData.buffer.asUint8List();MultipartFile multipartFile = new MultipartFile.fromBytes(imageData,//这个字段要有，否则后端接收为nullfilename: 'load_image',//请求contentType，设置一下，不设置的话默认的是application/octet/stream，后台可以接收到数据，但上传后是.octet-stream文件contentType: MediaType("image", "jpg"),);imageList.add(multipartFile);}FormData formData = new FormData.fromMap({//后端要用multipartFiles接收参数，否则为null"multipartFiles" : imageList});var res = await Dio().post("你的URL", data: formData);//后面随意发挥}
}

选择图片截图：这个插件选择图片后还有个加载过程，挺好的（按钮有点丑，凑合看吧，哈哈哈）

后端方法：SpringBoot

@RequestMapping(value = "xxx", method = RequestMethod.POST)//一定要有这个注解@RequestParam("multipartFiles[]")，否则接收不到参数public String testupload (@RequestParam("multipartFiles[]") List<MultipartFile> multipartFiles) throws IOException {if (multipartFiles.size() > 0) {for (MultipartFile multipartFile : multipartFiles) {//上传图片BufferedImage image = ImageIO.read(multipartFile.getInputStream());System.out.println(image);String extention ="."+ multipartFile.getContentType().split("/")[1];UUID uuid = UUID.randomUUID();String path = "D:/haha/" + uuid+ extention;File outputFile = new File(path);ImageIO.write(image, "jpg", outputFile);}}return "ok";}

上传后截图：

中间还有个小波折，第一次测试程序的时候程序报了个错：The multi-part request contained parameter data (excluding uploaded files) that exceeded the limit for maxPostSize set on the associated connector

开始以为是图片的过大，但是我已经在项目中设置了

spring.servlet.multipart.max-file-size = 100MB

spring.servlet.multipart.max-request-size=100MB

感觉不应该是图片尺寸的问题，

后来网上找了办法说是springboot中的内置tomcat服务器限定了Httppost的最大size

解决办法：在properties中添加如下配置，修改该内置服务器的对HttpPost数据的大小

server.max-http-header-size=102400000

server.tomcat.max-http-post-size=102400000

参考链接：https://blog.csdn.net/Draught_Bear/article/details/105601473

Flutter选择多张图片上传相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现（ajax，sync: false同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
多组input文件，每组 multiple选择多张图片上传可增删其中任意一张图片，用formData对象实现；（ajax做异步，自己做延时同步）
input .multiple选择多张图片时,需要删除其中的一张图片怎么做,大家都知道 input 中的文件是不能删除和更改的,只能清空,这里我的做法是定义一个对象储存器把需要的文件存在储存器中 f ...
【Android源码解析】选择多张图片上传多图预览
版权声明:本文为博主原创文章,转载请标明出处. https://blog.csdn.net/lyhhj/article/details/47731439 最近做了选择多图并且上传服务器,在网上找了一些 ...
安卓选择多张图片上传_微信7.0.5更新！安卓客户端领先ios发布，新增多项实用功能...
微信前段时间更新频繁,大大小小的更新,使得微信的UI设计整体风格都变得更加简洁起来,还新增了不少功能,非常实用.由于更新的功能比较多,很多人表示新功能还没完全摸透,但是微信可不给你更多时间,最新消息显 ...
仿微信图片选择及多张图片上传
最近做项目涉及到图片上传这块,多张图片上传是用xutils实现的,图片选择.预览是参考了微信图片选择的demo,先上图: 这是网上参考了仿微信图片上传实现的,这里就不多讲了,文章底部有下载链接,下面介 ...
php mysql上传多张图片_PHP实现一次性多张图片上传功能
原标题:PHP实现一次性多张图片上传功能最近遇到一个需求,就是多张图片上传,按住Ctrl键能选择多张图片一次性上传,上传成功后数据库保存图片的路径及图片原来的文件名.该功能一般在比较成熟的内容编辑器 ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
asp.net中使用Uploadify插件实现多张图片上传，上传后可显示缩略图、删除图片
本文为原创文章,欢迎转载!转载时请注明出处:http://blog.csdn.net/c_yang13 一.准备工具 1.jquery,我使用的是jquery-1.11.3.min.js 2.uplo ...

Flutter选择多张图片上传

Flutter选择多张图片上传相关推荐

最新文章

热门文章