卡比图床项目——项目完善产品完善上传限制目前已经实现了用户上传文件相关的功能，但是我们没有对于用户上传文件的类型进行

目前已经实现了用户上传文件相关的功能，但是我们没有对于用户上传文件的类型进行规定，这意味着用户可以上传任何类型的文件。这样的话我们的后台服务器很容易就被占满。因此我们需要对类型和大小进行限制

截屏2022-12-20 13.10.05.png

测试：上传doc文件

截屏2022-12-20 13.10.25.png

如果用户网速不好，上传时间很长，为了优化体验我们需要让用户知道现在正在加载。无论上传成功与否，结束后loading会消失。如果失败会弹出一个提示。

回到我们管理图片上传状态的image的store里面。我们已经写好了isUploading的状态。

截屏2022-12-20 13.47.39.png 我们现在还需要做loading的效果即可。

我们可以使用antd中的spin加载中组件。

截屏2022-12-20 13.58.13.png

在UpLoader里面新增一个find方法用于查询数据。根据LeanCloud的例子，

截屏2022-12-22 13.25.29.png

截屏2022-12-22 14.50.20.png

截屏2022-12-22 14.50.28.png

同样在List组件内，引入observer以及useStore来渲染列表页面

我们引入antd中的滚动加载组件其中List组件的数据来源就是我们HistoryStore中的list。

截屏2022-12-23 11.34.30.png

截屏2022-12-23 11.34.41.png

截屏2022-12-23 13.02.26.png 填充加载列表截屏2022-12-23 13.14.22.png

截屏2022-12-23 13.04.52.png

截屏2022-12-23 13.13.07.png

上传之后点击上传历史数据并不会有变化需要手动刷新才可以。我们可以通过useEffect来实现。我们需要它仅仅执行一次，所以第二个参数为[]。在离开这个界面的时候进行重制/清空。所以我们在store中定义一个reset的方法

截屏2022-12-23 13.24.22.png 同理在注销的时候也要进行重置

截屏2022-12-23 13.27.01.png

在展示历史记录的节目为了方便用户的体验，尝试实现用户点击删除按钮即可删除选中的图片并且从后台中删除。

首先在model中添加删除逻辑：

截屏2022-12-23 16.45.03.png

delete方法接受一个id，这个id就是上传时后台自动生成的objectId，回到store中，

删除之后要更新视图，截屏2022-12-23 16.45.39.png

最后在页面中加入按钮并且绑定点击事件。

截屏2022-12-23 16.46.09.png

效果如下截屏2022-12-23 16.46.31.png