06-Flutter 鸿蒙实战 06：上传后处理流程，照片识别、故事生成和状态刷新

06. Flutter 鸿蒙实战 06上传后处理流程照片识别、故事生成和状态刷新上传成功只是开始后面还有处理接口、故事生成、照片活化和列表刷新。上传后的链路照片上传完成并不代表业务结束。这个项目的核心价值在于“老照片变成可讲述的故事”所以上传后还要触发后端处理识别照片、提取年代地点人物、生成故事、尝试生成活化视频。前端需要清楚区分“上传中”和“处理中”。上传页里两个状态分开bool _uploadingfalse;bool _processingfalse;上传阶段显示具体百分比处理阶段显示不确定进度if(_processing)...[constSizedBox(height:16),constLinearProgressIndicator(),constSizedBox(height:8),constText(正在识别照片、生成故事并活化视频请不要离开,textAlign:TextAlign.center,),]为什么要分阶段文件上传是客户端可感知的字节传输进度可以计算照片处理属于服务端任务耗时取决于识别、故事生成和视频活化前端不能伪造百分比。把这两个阶段混在一起会让用户误以为卡在上传。项目变更记录里有过真实问题活化视频失败曾经导致整张照片处理失败。后来修正为故事生成成功后活化失败只更新照片活化状态不再删除照片和故事。这里可以沉淀出一个实现原则非核心附加能力失败不应该抹掉已经成功的主数据。处理接口后的状态更新上传成功后页面会从返回结果里取出photo再触发处理流程并刷新列表。核心思想是不要只依赖本地临时状态最终要以服务端照片列表为准。finalresponseawaitapiClient.uploadPhoto(bytes:bytes,filename:file.name,mimeType:mimeType,onProgress:(value){if(mounted)setState(()_progressvalue);},);finalphotoresponse[photo];处理完成后刷新上传列表也可以让首页、故事页拿到新数据。项目里StoriesRepository.clearCache()在登录切换时清缓存上传成功后也应该考虑相关页面刷新。错误展示上传页把异常转成用户可理解文案String_message(Objectexception)userFacingError(exception);前端不要把后端错误全部吞掉也不要用“操作失败”覆盖所有情况。比如文件太大、格式不支持、网络断开、处理失败这些提示应该不同。用户能根据提示采取下一步动作。和后端任务状态的关系从tasks.md和changes.md可以看到项目围绕照片处理修过多次问题活化模型参数、活化状态枚举、视频缓存、额度耗尽提示、403 链接失效等。这些问题最后都指向同一个原则移动端页面只展示真实后端状态不假装成功。例如活化视频生成失败时照片和故事仍然可以保存视频额度耗尽时详情页提示额度问题而不是让用户重新上传照片。处理流程图上传页和后端处理链路必须放在一起理解。它不是单纯 Flutter UI而是移动端与服务端长任务协作的完整场景。处理阶段拆分上传成功不等于处理成功照片上传接口只说明原图已经到达服务器。后续识别、故事生成、活化视频都可能继续运行。前端如果把“上传成功”当成“全部完成”用户会在故事页看不到新内容或者误以为处理卡住。这个项目用_processing单独表达后端处理阶段配合提示文案和刷新逻辑让用户知道照片已经上传服务端还在继续生成内容。非核心能力失败不能删除主数据项目真实修复过一个问题活化视频失败导致整张照片处理失败。后续改成故事生成成功后活化失败只更新照片活化状态不删除照片和故事。这个处理方式可以拆成三条规则主链路照片保存 - 信息识别 - 故事生成 增强链路照片活化 - 视频缓存 - 端内播放增强链路失败时不应该破坏主链路结果。移动端页面也要按这个边界展示状态。长任务状态设计长任务不能用一次请求概括照片上传完成只能说明原图已经传到服务器。后面的识别、故事生成、语音准备、视频活化都属于服务端处理链路。移动端如果把上传成功等同于全部完成用户很容易在故事页看不到内容误以为数据丢了。比较清晰的状态语义应该这样拆selected 本地已选择照片 uploading 字节正在上传 uploaded 原图到达服务端 processing 服务端正在生成业务内容 ready 故事或照片状态可展示 failed 某个阶段失败需要明确提示当前项目用_processing区分后端处理阶段。页面文案也对应这个阶段告诉用户照片已经进入服务端处理而不是简单显示“上传中”。主数据和附加能力要隔离项目曾经遇到过一个典型问题活化视频失败导致整张照片处理失败。后面改成故事生成成功后视频活化失败只更新照片活化状态不删除照片和故事。这种处理方式更符合移动端业务优先级。主数据照片、故事、年代、地点、人物 附加能力语音、视频活化、缩略图增强主数据成功后附加能力失败不能抹掉主数据。否则用户会看到“明明上传成功了最后什么都没有”的结果。正确做法是保留照片和故事再在详情页展示视频状态或错误提示。前端状态刷新要围绕真实接口移动端不要自己猜服务端处理结果。上传完成后应该通过照片列表、故事列表、照片详情接口刷新真实状态。Futurevoid_loadPhotos()async{finalrowsawaitapi.getJsonList(/api/photos);finalphotosrows.whereTypeMapString,dynamic().map(AlbumPhoto.fromJson).toList();setState((){_photosphotos;_photosLoadingfalse;});}这段逻辑看起来普通但它保证页面展示的是服务端最终状态。识别服务是否完成、故事是否生成、视频状态是否失败都应该从接口拿。错误提示要分层上传后处理链路里错误不能全部归成“操作失败”。比较合理的提示层级如下文件错误格式不支持、体积过大 网络错误断网、超时、服务器不可达 认证错误token 失效、未登录 业务错误识别失败、额度耗尽、视频生成失败 数据错误接口结构异常、缺少必要字段这些错误的处理动作不同。文件错误要重新选择网络错误要重试认证错误要回登录页业务错误要展示具体状态数据错误要查接口结构。提示越准确用户越容易继续操作开发者也更容易定位问题。验证处理链路完整验证不能只看上传接口返回 200还要继续检查后续页面1. 上传照片后照片列表出现新照片。 2. 故事列表能看到新生成的故事。 3. 故事详情里的年代、地点、人物字段有内容。 4. 视频活化失败时故事仍然保留。 5. 刷新页面后状态不回退。这组验证能覆盖“上传成功但业务内容没落地”的问题。移动端项目做长任务时最怕页面提前报成功后面状态却跟不上把状态刷新接到真实接口上问题会少很多。处理链路排查页面文案要反映真实阶段处理阶段的文案不能继续写“上传中”。上传和处理是两个动作用户看到不同文案才知道现在不是网络传输慢而是服务端正在生成内容。正在上传 35% 字节仍在传输 正在处理照片 服务端已收到照片正在生成内容 处理失败 服务端任务失败需要重试或查看错误文案准确会减少误解。用户如果以为还在上传可能会重复点击或退出页面知道已经进入处理阶段就更容易等待或去别的页面。状态刷新不要依赖固定等待移动端常见错误是上传后Future.delayed几秒再刷新。这种写法不稳定网络快时浪费时间网络慢时仍然拿不到结果。更稳的是围绕接口状态刷新。上传接口返回 - 刷新照片列表 照片详情接口 - 查看识别字段和视频状态 故事列表接口 - 查看故事是否生成 详情页轮询 - 只针对仍在处理中的视频状态当前项目里上传页刷新照片列表故事详情页针对活化状态做轮询。不同页面只刷新自己需要的数据避免全局乱刷。失败隔离的代码边界处理链路里可以把失败分为“阻断型”和“非阻断型”。阻断型照片上传失败、故事主内容生成失败 非阻断型视频活化失败、缩略图加载失败、高清语音生成失败阻断型失败要阻止进入下一阶段非阻断型失败只更新局部状态。这个边界能避免一个附加功能失败导致整条业务链路回滚。数据一致性检查处理完成后至少要检查三个接口的数据是否一致/api/photos 上传列表里有照片 /api/stories 故事列表里有对应故事 /api/photos/{id} 照片详情里有年代、地点、人物、视频状态如果照片存在但故事不存在问题在故事生成或列表刷新如果故事存在但照片详情缺字段问题在识别结果或元数据保存如果视频状态失败但故事存在属于非阻断失败不应该删除故事。处理流程问题定位表现象优先检查对应接口或文件处理方向上传成功但故事列表没有内容故事生成是否完成/api/stories刷新故事列表检查服务端处理日志照片有但元数据为空识别结果是否写入/api/photos/{id}检查年代、地点、人物字段视频失败导致故事消失主数据和附加能力是否耦合后端处理链路、详情页状态视频失败只更新视频状态不删除故事页面一直显示处理中状态刷新是否依赖真实接口upload_page.dart、story_detail_page.dart通过详情接口刷新状态不靠固定等待长任务最怕状态含糊。上传、识别、故事生成、视频活化是不同阶段页面要分别表达。只有这样用户才能知道现在是网络慢、服务端忙还是某个附加能力失败。处理状态字段设计上传后的处理链路最好不要只用一个布尔值表示。更清楚的做法是给照片维护独立的处理字段页面根据字段组合展示状态。photo.status uploaded / analyzing / ready / failed photo.storyStatus pending / generated / failed photo.animationStatus none / processing / ready / failed photo.errorMessage 最近一次失败原因页面展示时可以按优先级判断StringprocessingLabel(PhotoInfophoto){if(photo.statusfailed)return照片识别失败;if(photo.storyStatuspending)return故事生成中;if(photo.animationStatusprocessing)return视频活化中;if(photo.animationStatusfailed)return故事已生成视频暂不可用;return处理完成;}这样比“上传成功/失败”更精确。照片识别、故事生成、视频活化可以分别失败、分别恢复页面也能给出不同提示。