Flutter 图片选择和图片上传看这一篇就够了

最新推荐文章于 2024-06-16 22:34:01 发布
最新推荐文章于 2024-06-16 22:34:01 发布
阅读量4.7k 收藏 1
点赞数 3
分类专栏： Flutter 入门与实战 文章标签： flutter ios android App 开发 跨平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuijian00/article/details/121864797
版权

内容简介

本篇将介绍 Flutter 中如何完成图片上传，以及上传成功后的表单提交。涉及的知识点如下：

  • 图片选择插件wechat_assets_picker的使用。
  • 图片选择 iOS 和安卓的应用权限配置。
  • 图片选择组件的封装。
  • 图片上传接口的封装。
  • 添加和编辑页面中图片上传实现。

图片选择插件

Flutter 的图片选择插件很多，包括了官方的 image_picker，multi_image_picker（基于2.0出了 multi_image_picker2）等等。为了寻找合适的图片选择插件，找了好几个，发现了一个仿微信的图片选择插件 wechat_assets_picker，看评分和 Github的Star都不错，先来试用一下。

权限申请

先上了一个简单的 demo，直接调用：

final List<AssetEntity> assets = await AssetPicker.pickAssets(context);

结果发现闪退了！！！难道是插件有bug？

bug.jpg

哦，想起来了！忘记设置图片获取权限了！iOS

了解本专栏 订阅专栏 解锁全文 超级会员免费看
岛上码农
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Flutter图片视频文件选择插件
01-08
【Flutter图片视频文件选择插件】是一个专门为Flutter开发者设计的扩展库，旨在简化在Flutter应用中选择图片和视频文件的过程。这个插件由作者独立开发，欢迎社区成员使用并提供反馈，以帮助改进功能和用户体验。它...
Flutter选择相册图片和拍照示例
03-08
Flutter选择图片和拍照示例，详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/88345232
推荐项目：Flutter WeChat Assets Picker - 强大的微信样式图片选择器
gitblog_00082的博客
03-26 886
推荐项目：Flutter WeChat Assets Picker - 强大的微信样式图片选择器 项目地址:https://gitcode.com/fluttercandies/flutter_wechat_assets_picker 项目简介 flutter_wechat_assets_picker 是一个专为 Flutter 开发者设计的微信样式图片和视频选择库。它模仿了微信内置的媒体选择器...
flutter实现选择图片视频上传到oss和图片视频的预览功能
weixin_40466351的博客
04-30 1307
cached_network_image: ^3.3.1 //缓存网络图片，避免多次请求。interactiveviewer_gallery: ^0.6.0 //图片视频预览。flutter_oss_aliyun: ^6.4.1 //图片上传到阿里云oss。video_thumbnail: ^0.5.3 //视频生成缩略图。image_picker: ^1.1.0 //选择图片。video_player: ^2.8.6 //视频播放。uuid: ^4.4.0 //生成唯一uuid。
flutter中采用腾讯云COS进行图片存储
最新发布
zzj17637822814的博客
06-16 482
首先配置文件添加 flutter_cos: ^0.0.3。采用方法调用然后上传。
【flutter上传图片】
androidhyf的博客
09-04 1431
flutter上传图片
【flutter直接上传图片到阿里云OSS】
androidhyf的博客
08-22 1510
flutter直接上传图片到阿里云OSS
flutter用ImagePicker实现图片上传
z15267429952的博客
12-18 742
在 setState 中的回调函数应该是同步的，不应该包含异步操作。可以将 await 操作移动到 setState 之外。图片上传+ImagePicker的使用。
flutter 使用http上传图片到服务器
weixin_37630479的博客
03-21 314
构造函数创建一个 POST 请求，将图片作为文件添加到请求中，并发送到服务器。在成功上传后，服务器应该会返回一个。在上面的代码中，我们使用。使用 http 库上传图片。状态码，否则上传失败。
第四百三十三回 使用get显示Dialog
talk_8的专栏
03-31 967
我们在本章回中介绍了如何使用Get包中的方法显示Dialog,我们介绍了两种不同显示效果的Dialog,并且通过文本结合代码的方式对它们进行了介绍。
Flutter多图上传组件
qq_41680720的博客
04-26 994
Flutter多图上传组件 项目开发过程中，需要多图上传组件，但目前网络上没有完全符合需求的组件，故在参考的基础上自行编写了一个多图上传组件。 该组件依赖image_picker和dio 效果图 该组件目前仅支持一次上传一张图片，每次增加图片按钮会随之移动 代码： List imgPathList;//存储图片地址 List imageId;//存储图片id @override Widget build(BuildContext context) { return Container(
基于Android的知乎图片选择Flutter插件库设计源码
04-11
本源码提供了一个基于Android的知乎图片选择Flutter插件库设计。...这个插件库是一个知乎图片选择功能的Flutter插件库，可能包括图片的选择、处理等功能，适合用于Flutter应用中添加知乎图片选择功能。
头像上传/拍照/从相册选择（个人信息模块会用到）
07-27
个人信息中一般都会带有头像设置功能，本Demo是从我项目中拿出来的，在做个模块时遇到了许多问题，最后百度一一坚决了，虽不说是最好的，但也能应付基本功能了。 也许新手会遇到一个问题，在其它手机均没问题，但在小米3手机就是不行，后来发现利用绑定URI传递数据可以截取很大的图，但使用Data返回的话，截取大图会OOM，所以本Demo做了一些限定。 测试完美通过的有以下系统： 三星I8150的2.3系统， 三星Note3的4.3系统， 小米2s的4.1系统， 小米3的4.4.2系统。
flutter图片选择器
08-17
"flutter图片选择器"就是一个专为Flutter应用程序设计的插件，用于实现这一功能。这个插件通常易于集成，可以快速地添加到你的项目中，让用户能够方便地挑选并上传图片。 在Flutter中，`image_picker`库是实现图片...
Flutter自定义控件之图片裁剪框
01-10
在本文中，我们将深入探讨如何在Flutter框架中创建一个自定义控件，专注于实现图片裁剪功能。Flutter作为Google推出的跨平台开发工具，以其丰富的Widget库和高效的开发体验深受开发者喜爱。然而，尽管Flutter提供了...
flutter 上传图片 image_picker 的使用
weixin_30338481的博客
06-25 2390
Github地址：https://github.com/flutter/plugins/tree/master/packages/image_picker packages地址：https://pub.dev/packages/image_picker 1、将其添加到包的pubspec.yaml文件中： image_picker: ^0.4.5 2、安装 fl...
flutter 图片上传 cos
那些年我们踩过的坑
11-08 7157
费了半天劲，先说一下遇到的几个坑： 1、cos拼接目录两边要带‘/’ 不然会报签名不匹配 '/picture/'获取签名和文件上传需要使用 2、flutter 热重载 静态变量无法重置需要重启或重新打开应用 3、cos http协议put请求 一、选择图片： 使用插件 image_picker: '^0.4.5' import 'package:image_picker/imag...
第二百三十八回 wechat系列picker使用总结
talk_8的专栏
12-31 877
我们在本章回中对两三方包做了全部的总结和分析，并且与具有类似功能的包做了对比，方便大家选择包时参考。
Flutter 单张图片选择上传功能以及多张图片选择
北枫林
05-14 1502
flutter选择单张或多张图片
flutter图片上传
04-04
Flutter 图片上传可以通过以下步骤实现： 1. 导入相关依赖： ```dart dependencies: dio: ^4.0.0 flutter_image_compress: ^0.9.0 image_picker: ^0.8.3+2 ``` 2. 添加权限： 在 `AndroidManifest.xml` 中添加以下权限： ```xml <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.CAMERA"/> ``` 在 `Info.plist` 中添加以下权限： ```xml <key>NSCameraUsageDescription</key> <string>使用相机拍照上传图片</string> <key>NSPhotoLibraryUsageDescription</key> <string>使用相册选取图片上传</string> ``` 3. 实现选择图片功能： ```dart final ImagePicker _picker = ImagePicker(); XFile? _imageFile; Future<void> _getImage(ImageSource source) async { final pickedFile = await _picker.pickImage(source: source); if (pickedFile != null) { setState(() { _imageFile = pickedFile; }); } } ``` 4. 实现图片压缩： ```dart import 'dart:io'; import 'package:flutter_image_compress/flutter_image_compress.dart'; Future<File> _compressImage(File file) async { final result = await FlutterImageCompress.compressAndGetFile( file.absolute.path, file.absolute.path, quality: 50, ); return result!; } ``` 5. 实现上传图片功能： ```dart import 'dart:io'; import 'package:dio/dio.dart'; void _uploadImage() async { if (_imageFile == null) return; final file = File(_imageFile!.path); final compressedFile = await _compressImage(file); final formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(compressedFile.path), }); final response = await Dio().post( 'https://example.com/upload', data: formData, ); if (response.statusCode == 200) { print('上传成功'); } else { print('上传失败'); } } ``` 完整代码示例： ```dart import 'dart:io'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:flutter_image_compress/flutter_image_compress.dart'; import 'package:image_picker/image_picker.dart'; class ImageUploadPage extends StatefulWidget { const ImageUploadPage({Key? key}) : super(key: key); @override _ImageUploadPageState createState() => _ImageUploadPageState(); } class _ImageUploadPageState extends State<ImageUploadPage> { final ImagePicker _picker = ImagePicker(); XFile? _imageFile; Future<void> _getImage(ImageSource source) async { final pickedFile = await _picker.pickImage(source: source); if (pickedFile != null) { setState(() { _imageFile = pickedFile; }); } } Future<File> _compressImage(File file) async { final result = await FlutterImageCompress.compressAndGetFile( file.absolute.path, file.absolute.path, quality: 50, ); return result!; } void _uploadImage() async { if (_imageFile == null) return; final file = File(_imageFile!.path); final compressedFile = await _compressImage(file); final formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(compressedFile.path), }); final response = await Dio().post( 'https://example.com/upload', data: formData, ); if (response.statusCode == 200) { print('上传成功'); } else { print('上传失败'); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('上传图片'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if (_imageFile != null) Image.file(File(_imageFile!.path)) else const Text('请选择图片'), ElevatedButton( onPressed: () => _getImage(ImageSource.camera), child: const Text('拍照'), ), ElevatedButton( onPressed: () => _getImage(ImageSource.gallery), child: const Text('选择图片'), ), ElevatedButton( onPressed: _uploadImage, child: const Text('上传图片'), ), ], ), ), ); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

岛上码农

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值