21、图像上传与React路由：实现社交应用的功能拓展

图像上传与React路由：实现社交应用的功能拓展

1. 图像上传处理

在社交应用中，图像上传是一项常见且重要的功能。当用户点击保存按钮时，图像会被上传到S3存储桶的用户文件夹下。借助编写的Mutation组件，顶部栏的头像图像会使用新的S3存储桶位置的URL进行更新。

整个图像上传的流程如下：
1. 用户上传图像到服务器。
2. 服务器将所有图像传输到S3。
3. AWS响应返回公共URL。
4. 该URL直接放置在浏览器的头像字段中。

通过这种方式，使用GraphQL API从后端查询头像图像的方式保持不变，只需返回S3文件的URL即可。

2. React路由基础

目前，应用只有一个屏幕和一个路径，用户访问时可以登录并查看新闻动态和聊天信息。但对于社交网络来说，用户拥有自己的个人资料页面是必要的，因此需要引入客户端路由。

2.1 路由的重要性

路由对于大多数Web应用至关重要，原因如下：
- 内容展示 ：一个页面无法涵盖应用的所有功能，会导致页面过载，用户难以理解。
- 分享功能 ：社交网络需要能够分享图片、个人资料或帖子的链接，每个项目需要有自己的URL和页面。
- 搜索引擎优化（SEO） ：将内容拆分为不同页面有助于SEO。

2.2 静态路由与动态路由

常见的路由库如Angular、Ember、Ruby on Rails和Express.js使用静态路由，即预先配