iOS实际开发中使用Alamofire实现多文件上传(以个人相册为例)
引言
在移动应用中,图片上传是一个常见的功能,尤其是在个人中心或社交平台场景中,用户经常需要上传图片到服务器,用以展示个人风采或记录美好瞬间。然而,实现多图片上传的过程中,如何设计高效的上传逻辑并结合用户体验显得尤为重要。
本篇博客将通过一个具体实例——个人中心的相册功能,来介绍如何使用 Alamofire 实现多文件上传。我们将从图片选择开始,逐步实现图片数据的封装、上传请求的构建以及上传进度的展示,最终完成一套完整的多图片上传解决方案。如果你也正在寻找一种高效的实现方法,希望本文能为你提供一些思路与启发。
功能需求分析
用户的个人信息页面会展示用户的一些精选照片墙,为了补充这个信息在用户编辑页添加了的上传相册图片的功能,上传到相册的图片最多为6张,可以多选,但是已选择和已上传的总数不能超过6。
关于相册选择我们可以使用系统为我们提供的PHPickerViewController来实现,使用起来十分方便,可以直接设置选择资源类型和最大个数,关于它的使用在之前的博客中也有过介绍,有兴趣的同学可以看下面这篇博客。
iOS 系统提供的媒体资源选择器(PHPickerViewController)-CSDN博客文章浏览阅读1.6k次,点赞10次,收藏20次。在前面的博客中我们已经介绍了一个系统为我们提供的媒体选择器UIImagePickerController,它的功能很强大,但是唯一的不足就是只能选取单个媒体资源,而PHPickerViewController恰恰弥补了这一空缺。PHPickerViewController是iOS 14及更高版本中引入的一个现代化媒体选择器,旨在替代UIImagePickerController。它不仅提供了更灵活的媒体选择功能,还拥有更现代的用户界面。_phpickerviewcontrollerhttps://blog.csdn.net/weixin_39339407/article/details/140918416选择了相册的图片之后,下一步就上传图片资源到相册。Alamofire为我们提供了完整的上传方法但是由于我们需要上传多个资源,所以仍然有一些数据来需要我们处理。
接口设计
在讨论如何实现多文件上传之前,我们首先需要了解一下后端的接口设计,每个服务端对于文件上传的方式都并不是一成不变的。
在上传相册图片的需求中,整个过程被分成了两个接口:
- 文件上传接口:负责文件上传,需要设置文件的类型,以及自定义参数,来决定文件上传是用来做什么的,每次只能上传一个文件。会返回上传后的资源地址。
- 相册更新接口:使用上传后的资源地址构建列表,来更新相册。
代码实现
那我们跳过关于UI的布局刷新以及照片的选择功能,将所有精力集中到文件上传,照片选择完成之后会传递回来一个等待上传的图片数组,为了更符合业务场景,我们需要根据图片数组来构建一组新的相册模型,并添加到相册列表,然后执行上传操作。
选择照片后的处理:
/// 选择相册图片/// - Parameter images: 图片数组func uploadAlbum(images: [UIImage]) {//1. 先刷新for image in images {let model = MWEditPhotoModel()model.image = imagemodel.uploadStatus = .noneeditUserPhotos.append(model)}self.tableView.reloadData()//2.开始执行上传操作self.presenter.requestUploadAlbumData(editPhotoModels: editUserPhotos) {[weak self] inguard let self = self else { return }self.tableView.reloadData()}}
- 根据选择上传的图片数组构建新的相册模型,并添加到相册列表中,刷新列表。
- 将整个相册列表当做参数传递到上传方法中。
首先会根据传递进来的相册列表数据进行过滤,获取到需要上传的进行上传:
/// 信号量最大并发控制为2private let semaphore = DispatchSemaphore(value: 2)
/// 上传用户相册func requestUploadAlbumData(editPhotoModels:[MWEditPhotoModel], completion: (() -> Void)?) {uploadAlbumCompletion = completion// 获取需要上传的模型let needUploadModels = editPhotoModels.filter { $0.uploadStatus == .none && $0.isAdd == false }// 上传图片var needUploadCount = needUploadModels.countlet semaphore = self.semaphoreglobalQueue.async {[weak self] inguard let self = self else {return}for model in needUploadModels {model.uploadStatus = .uploadingsemaphore.wait()MWLogHelper.debug("开始上传图片",context: "MWEditProfilePresenter")self.uploadAlbumImages(model) {[weak self] success inMWLogHelper.debug("上传图片结果\(success)",context: "MWEditProfilePresenter")defer {// 无论结果如何,确保释放信号量semaphore.signal()}guard let self = self else {return}if success == false {model.uploadStatus = .fail}needUploadCount -= 1if needUploadCount == 0 {self.requestUpdateAlbumData(editPhotoModels: editPhotoModels)}}}}}
- 首先创建了一个信号量来控制可以同时上传的最大个数。
- 过滤出需要上传的数据执行上传操作。
- 当所有资源上传完成之后在根据列表数据来更新相册。
那我们先来看一下上传方法:
// 上传相册图片private func uploadAlbumImages(_ editPhotoModel: MWEditPhotoModel,complection:((Bool)->Void)? = nil) {guard let imageData = editPhotoModel.image?.compressImageQuality(maxSize: Int(640 * 640)) else {complection?(false)return}MWNetworkHelper.upLoadFile(data: imageData, kinds: "photo", fileType: MWUploadFileType.image, fileName: "photo.jpg") { result inif let imageUrl = result?["photo"] {var albumModel = MWProfileAlbumModel()albumModel.littleUrl = imageUrlalbumModel.srcUrl = imageUrleditPhotoModel.albumModel = albumModeleditPhotoModel.uploadStatus = .successcomplection?(true)} else {editPhotoModel.uploadStatus = .failcomplection?(false)}} notRedirectErrorCallback: {complection?(false)MWToast.showToast(MWLocaleStringHelper.getString("Upload Failed"))}}
/// 上传文件/// - Parameters:/// - data: 文件数据/// - kinds: 参数/// cover 封面, facebookSharedImage 分享, portrait 头像, pic 图片, zip 压缩包, video 视频, , ,photo 相册, photoProcess 相册模糊, liveCover 直播间封面 photoWall, 个人主页, photoWallBig 个人主页大图/// - fileType: 文件类型/// - fileName: 文件名称/// - completion: 上传结果public class func upLoadFile(data: Data, kinds: String, fileType: MWUploadFileType, fileName: String, completion: @escaping (([String: String]?) -> Void), notRedirectErrorCallback: @escaping () -> Void) {// 上传地址var url = "\(MWAPIHost.host)/rest/api/usergate/uploadFile"// 上传headervar headers = [String:String]()// 重定向let redirectHandler = MWRedirectHandler(data: data, kinds: kinds, fileType: fileType, fileName: fileName, completion: completion)AF.upload(multipartFormData: { multipartFormData in//图片var mimeType = "image/jpg"if fileType == .video {mimeType = "video/mp4"}multipartFormData.append(data, withName: "file",fileName: fileName, mimeType: mimeType)// 上传 kinds 参数if let kindsData = kinds.data(using: .utf8) {multipartFormData.append(kindsData, withName: "kinds")}}, to: url,method: .post, headers: MWAPIEncryEndpoint.api_postDynamic.headers).redirect(using: redirectHandler).responseJSON { response inif response.response?.statusCode != 307 {notRedirectErrorCallback()}}}
- 文件名称和文件类型需要根据文件的具体内容来设置。
- kinds为服务端自定的参数。
- 关于重定向的暂且可以不考虑,我们的文件上传接口进行了接口的重定向,一般来讲是不需要单独处理的。
- 文件上传成功之后根据返回结果,构建了新的相册数据,并同步到相册列表。
最后我们只需要等待所有文件上传完成之后,将所有数据同步到相册接口即可:
/// 更新用户相册/// - Parameters:/// - editPhotoModels: 编辑相册模型/// - completion: 完成回调func requestUpdateAlbumData(editPhotoModels:[MWEditPhotoModel]) {let needUpdateModels = editPhotoModels.filter { $0.uploadStatus == .success || $0.uploadStatus == .noNeed }let albumList = needUpdateModels.map { $0.albumModel }var photoList = [[String: Any]]()for albumModel in albumList {var dict = [String: Any]()dict["littleUrl"] = albumModel?.littleUrldict["srcUrl"] = albumModel?.srcUrlphotoList.append(dict)}let params: [String: Any] = ["photoList": photoList]MWNetworkHelper.request(endpoint: MWAPIEncryEndpoint.api_updateUserPhotos, parameters: params) {[weak self] (model, data, error) inguard let self = self else { return }if error != nil {for model in needUpdateModels {if model.uploadStatus == .success {model.uploadStatus = .fail}}}self.uploadAlbumCompletion?()}}
结语
本篇博客主要介绍了使用Alamofire实现多文件的上传功能,关于文件上传的具体方案还是需要根据服务端的接口设计来实施。本文以同步用户相册为例,将上传相册图片分为两个部分,上传和同步,当所有资源上传完成之后,执行相册的同步操作。并使用信号量来控制上传的最大并发数。
希望本篇博客能够在文件上传中给大家一些启发。
相关文章:
iOS实际开发中使用Alamofire实现多文件上传(以个人相册为例)
引言 在移动应用中,图片上传是一个常见的功能,尤其是在个人中心或社交平台场景中,用户经常需要上传图片到服务器,用以展示个人风采或记录美好瞬间。然而,实现多图片上传的过程中,如何设计高效的上传逻辑并…...
如何将分割的mask转为为分割标签
将分割的mask转换为分割标签通常涉及将每个像素的类别标识(在mask中以不同的灰度值或颜色表示)转换为整数标签。这些标签通常用于机器学习或深度学习模型的训练、验证和测试阶段。 使用方式,控制台或者命令行使用以下命令: pyth…...

【动手学电机驱动】STM32-MBD(5)Simulink 模型开发之 PWM 输出
STM32-MBD(1)安装 Simulink STM32 硬件支持包 STM32-MBD(2)Simulink 模型部署入门 STM32-MBD(3)Simulink 状态机模型的部署 STM32-MBD(4)Simulink 状态机实现按键控制 STM32-MBD&…...

MySQL进阶突击系列(05)突击MVCC核心原理 | 左右护法ReadView视图和undoLog版本链强强联合
2024小结:在写作分享上,这里特别感谢CSDN社区提供平台,支持大家持续学习分享交流,共同进步。社区诚意满满的干货,让大家收获满满。 对我而言,珍惜每一篇投稿分享,每一篇内容字数大概6000字左右&…...

vue2日历组件
这个代码可以直接运行,未防止有组件库没安装,将组件库的代码,转成文字了 vue页面 <template><div class"about"><div style"height: 450px; width: 400px"><div style"height: 100%; overflo…...
【PyQt】多行纯文本框
[toc]qt多行纯文本框 QPlainTextEdit QPlainTextEdit 是可以多行的纯文本编辑框 文本浏览框 内置了一个** QTextDocument **类型的对象 ,存放文档。 1.信号:文本被修改 当文本框中的内容被键盘编辑,被点击就会发出 textChanged 信号&…...
workerman5.0篇〡异步非阻塞协程HTTP客户端
概述 workerman/http-client 是一个异步http客户端组件。所有请求响应异步非阻塞,内置连接池,消息请求和响应符合PSR7规范。 Workerman 5.0 版本中的异步HTTP协程客户端组件是一个基于PHP协程的高性能HTTP客户端,它能够充分利用PHP的异步特…...

JavaScript 延迟加载的方法( 7种 )
JavaScript脚本的延迟加载(也称为懒加载)是指在网页的主要内容已经加载并显示给用户之后,再加载或执行额外的JavaScript代码。这样做可以加快页面的初始加载速度,改善用户体验,并减少服务器的压力。 以下是几种常见的延…...

python+pymysql
python操作mysql 一、python操作数据库 1、下载pymysql 库, 方法一:pip3 install pymysql 或pip install pymysql 方法二:在pycharm中setting下载pymysql 2、打开虚拟机上的数据库 3、pymysql连接 dbpymysql.Connection(host&qu…...
基于 Selenium 实现上海大学校园网自动登录
基于 Selenium 实现上海大学校园网自动登录 一、技术方案 核心工具: Selenium:一个用于自动化测试的工具,能够模拟用户在浏览器上的操作。Edge WebDriver:用于控制 Edge 浏览器的驱动程序。 功能设计: 检测网络状…...

啥!GitHub Copilot也免费使用了
文章目录 前言免费版直接修复代码多文件上下文Agent模式总结 前言 最近,GitHub 给开发者们带来了一个好消息:他们的 AI 编程助手 GitHub Copilot 现在可以免费使用了!以前,每个月要花 10 美元才能享受的服务,现在对所…...
Spring配置文件中:密码明文改为密文处理方式(通用方法)
目录 一、背景 二、思路 A) 普通方式 B) 适合bootstrap.properties方式 三、示例 A) 普通方式(连接Redis集群) A) 普通方式(连接RocketMQ) B) 适合bootstrap.properties方式 四、总结 一、背景 SpringBoot和Sprin…...

Linux下ext2文件系统
文章目录 一 :penguin:基本概述二 :star: ext2文件系统:star: 1. :star:Boot Block(引导块)位置与作用 三 Block Group(块组):star:1.:star: Super Block(超级块):star:2.:star: Group Descriptor(块组描述符):star:…...

BUUCTF:web刷题记录(1)
目录 [极客大挑战 2019]EasySQL1 [极客大挑战 2019]Havefun1 [极客大挑战 2019]EasySQL1 根据题目以及页面内容,这是一个sql注入的题目。 直接就套用万能密码试试。 admin or 1 # 轻松拿到flag 换种方式也可以轻松拿到flag 我们再看一下网页源码 这段 HTML 代码…...

【微服务】面试题 6、分布式事务
分布式事务面试题讲解 一、问题背景与解决方案概述 因微服务项目涉及远程调用可能引发分布式事务问题,需解决。主流解决方案有阿里 Seata 框架(含 XA、AT、TCC 模式)和 MQ。 二、Seata 框架关键角色 事务协调者(TC)&…...

【2024年华为OD机试】(C卷,100分)- 分割均衡字符串 (Java JS PythonC/C++)
一、问题描述 题目描述 均衡串定义:字符串中只包含两种字符,且这两种字符的个数相同。 给定一个均衡字符串,请给出可分割成新的均衡子串的最大个数。 约定:字符串中只包含大写的 X 和 Y 两种字符。 输入描述 输入一个均衡串…...

Spring Data Elasticsearch简介
一、Spring Data Elasticsearch简介 1 SpringData ElasticSearch简介 Elasticsearch是一个实时的分布式搜索和分析引擎。它底层封装了Lucene框架,可以提供分布式多用户的全文搜索服务。 Spring Data ElasticSearch是SpringData技术对ElasticSearch原生API封装之后的产物,它通…...

GESP202312 四级【小杨的字典】题解(AC)
》》》点我查看「视频」详解》》》 [GESP202312 四级] 小杨的字典 题目描述 在遥远的星球,有两个国家 A 国和 B 国,他们使用着不同的语言:A 语言和 B 语言。小杨是 B 国的翻译官,他的工作是将 A 语言的文章翻译成 B 语言的文章…...
键盘过滤驱动
文章目录 概述注意源码参考资料 概述 irp请求会从io管理器中传递到设备栈中依次向下发送,当到达底层真实设备处理完成后,会依次返回,这时如果在设备栈中有我们自己注册的设备,就可以起到一个过滤的功能。键盘过滤驱动就是如此&am…...

dolphinscheduler2.0.9升级3.1.9版本问题记录
相关版本说明 JDK:JDK (1.8) DolphinScheduler :3.1.9 数据库:MySQL (8),驱动:MySQL JDBC Driver 8.0.16 注册中心:ZooKeeper (3.8.4) 问题一:dolphinscheduler2.0.9对应zk版本使用…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
前端高频面试题2:浏览器/计算机网络
本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…...
Python常用模块:time、os、shutil与flask初探
一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

ArcGIS Pro+ArcGIS给你的地图加上北回归线!
今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等,设置经线、纬线都以10间隔显示。 2、需要插入背会归线…...
python打卡第47天
昨天代码中注意力热图的部分顺移至今天 知识点回顾: 热力图 作业:对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图,展示模…...

Springboot 高校报修与互助平台小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,高校报修与互助平台小程序被用户普遍使用,为…...