flutter 上传图片并裁剪

在这里插入图片描述

1.首先在pubspec.yaml文件中新增依赖pub.dev

image_picker: ^0.8.7+5
image_cropper: ^4.0.1

2.在Android的AndroidManifest.xml文件里面添加权限

<activityandroid:name="com.yalantis.ucrop.UCropActivity"android:screenOrientation="portrait"android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

3.在ios的Info.plist文件里面添加权限 项目根目录

    <key>NSCameraUsageDescription</key><string>这是你的自拍照</string><key>NSMicrophoneUsageDescription</key><string>用于音频插件</string><key>NSPhotoLibraryUsageDescription</key><string>用于相册选择插件</string><key>UIBackgroundModes</key><array><string>remote-notification</string></array>

4.代码实现

​​​​​​​_checkAvatar() {if (!kIsWeb) {loading(() async {final picker = ImagePicker();final pickerFile = await picker.pickImage(source: ImageSource.gallery);if (pickerFile != null) {CroppedFile? croppedImage = await ImageCropper().cropImage(sourcePath: pickerFile.path, //图片资源aspectRatio: const CropAspectRatio(ratioX: 1, ratioY: 1), //裁剪框比例uiSettings: [AndroidUiSettings(toolbarTitle: '裁剪',lockAspectRatio: true //锁定图片纵横比),IOSUiSettings(title: '裁剪',resetButtonHidden: true, //不显示重置按钮aspectRatioLockEnabled: true, //锁定图片纵横比aspectRatioPickerButtonHidden: true, //隐藏切换纵横比按钮doneButtonTitle: "完成", //confirm按钮文字cancelButtonTitle: "取消" //cancel按钮文字)]);//根据XFile对象的路径获得图片进行裁剪//裁剪完成if(croppedImage != null) {//裁剪后图片的路径String filepath = croppedImage.path;final res = await Api.getInstance().uploadAvatar(Provider.memberId, filepath);//pickerFile.pathif (res['code'] == 0) {setState(() {ThemeSnackBar.show(context, res['msg']);_getUserInfo();_user['profilePhoto'] = res['data']['url'];});} else {ThemeSnackBar.show(context, res['msg']);}print("filepath-----$filepath");}}});} else {final uploadInputElement = html.FileUploadInputElement();uploadInputElement.multiple = false;uploadInputElement.draggable = true;uploadInputElement.click();uploadInputElement.onChange.listen((event) {final file = uploadInputElement.files?.first;if (file != null) {loading(() async {final formData = html.FormData();formData.appendBlob("avatarfile", file.slice(), file.name);formData.append("memberId", Provider.memberId);Api.getInstance().uploadAvatarFromHtml(formData, (e) {if (e['code'] == 0) {setState(() {_user['profilePhoto'] = e['data']['url'];});} else {ThemeSnackBar.show(context, e['msg']);}});});}});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/99655.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring-mvc的参数传递与常用注解的解答及页面的跳转方式---综合案例

目录 一.slf4j--日志 二.常用注解 2.1.RequestMapping 2.2.RequestParam 2.3.RequestBody 2.4.PathVariable 三.参数的传递 3.1 基础类型 3.2 复杂类型 3.3 RequestParam 3.4 PathVariable 3.5 RequestBody 3.6 增删改查 四.返回值 4.1 void 返回值 4.2 String 返…

Elsaticsearch倒排索引

搜索引擎应该具有什么要求&#xff1f; 查询快 高效的压缩算法 快速的编码和解码速度 结果准确 BM25 TF-IDF 检索结果丰富 召回率 面向海量数据&#xff0c;如何达到搜索引擎级别的查询效率&#xff1f; 索引 帮助快速检索以数据结构为载体以文件形式落地 倒排…

手把手教你写一个简单的ioc容器

Ioc IOC&#xff08;控制反转&#xff09; 就是 依赖倒置原则的一种代码设计思路。就是把原先在代码里面需要实现的对象创建、对象之间的依赖&#xff0c;反转给容器来帮忙实现。 Spring IOC容器通过xml,注解等其它方式配置类及类之间的依赖关系&#xff0c;完成了对象的创建和…

微服务-gateway基本使用

文章目录 一、前言二、gateway网关1、什么是微服务网关&#xff1f;2、微服务架构下网关的重要性2.1、没有网关2.2、有网关 3、gateway的功能4、gateway实战4.1、依赖配置4.2、添加网关配置4.3、添加网关启动类4.4、查看项目是否启动成功4.5、验证路由配置是否正确 三、总结 一…

报错:axios发送的所有请求都是404

axios发送的所有请求都是404 一、问题二、分析三、解决一、问题 对后台发送数据请求接口,在 Swagger 上是可以请求到的 但是通过 Ajax 发送请求就会报 404 Swagger 上调用如下 项目接口请求如下

react16之前diff算法的理解和总结

此篇文章所讨论的是 React 16 以前的 Diff 算法。而 React 16 启用了全新的架构 Fiber&#xff0c;相应的 Diff 算法也有所改变&#xff0c;本片不详细讨论Fiber。 fiber架构是为了支持react进行可中断渲染&#xff0c;降低卡顿&#xff0c;提升流畅度。 react16之前的版本&…

二、C#—第一个c#程序(2)

&#x1f33b;&#x1f33b; 目录 一、编写第一个C#程序1.1 使用Visual Studio创建c#程序的步骤1.2 编写第一个程序“Hello Word”1.3 c#程序的基本结构1.3.1 c#中的命名空间1.3.2 c#中的类1.3.3 c#中的程序启动器——Main方法1.3.4 c#中的标识符1.3.5 c#中的关键字1.3.6 c#中的…

Java-HashMap中put()方法是如何实现的,内含详细流程图

文章目录 Java中的HashMap什么是HashMap&#xff1f;对比其他Map中put()方法HashMap中put()方法使用示例 HashMap中put()源码解析手绘流程图实现原理源码探究&#xff08;JDK 1.8&#xff09; 设计put()的意义总结 Java中的HashMap 什么是HashMap&#xff1f; HashMap是Java中…

linux并发服务器 —— 多进程并发 - 进程间的通信及实践(五)

进程间的通信 进程是一个独立的资源分配单元&#xff0c;不能在一个进程中直接访问另一个进程的资源&#xff1b; 进程间通信&#xff08;IPC&#xff09;的目的&#xff1a; 1. 数据传输 - A进程发送数据给B进程 2. 通知事件 - eg. 进程终止通知父进程 3. 资源共享 - 多个…

打包个七夕exe玩玩

前段时间七夕 当别的哥们都在酒店不要不要的时候 身为程序员的我 还在单位群收到收到 正好后来看到大佬些的这个 https://www.52pojie.cn/thread-1823963-1-1.html 这个贱 我必须要犯&#xff0c;可是我也不能直接给他装个python吧 多麻烦 就这几个弹窗 好low 加上bgm 再打包成…

解决Maven依赖下载问题:从阿里云公共仓库入手

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

CSS学习笔记03

CSS笔记03 盒子模型 什么是盒子模型 概念&#xff1a; CSS 盒子模型就是在网页设计中经常用到的一种思维模型&#xff0c;是 CSS 布局的基石&#xff0c;主要规定了元素是如何显示的以及元素间的相互关系。定义所有元素都可以有像盒子一样的平面空间和外形。包含内容区、内边…