react

✍️ Tangxt ⏳ 2021-04-12 🏷️ epic

04-完结篇上传历史的实现

1）产品完善：上传限制与加载提示

目前的问题：可以上传视频等资源

如果什么都可以上传，而且上传内容的大小也不限制，那么这个免费的存储空间很容易就满了……

我们要做的：

限制文件的类型
限制文件的大小

用到的第三方组件：加载中 Spin - Ant Design

上传限制：

上传限制

效果：

加载提示：

加载提示

效果：

2）上传历史数据查询接口

数据都在 Leancloud 的 Image 里边：

数据位置

我们要做的：

查询数据
展示数据

CRUD 之查询操作！

执行一次基础查询通常包括这些步骤：

构建 AV.Query；
向其添加查询条件；
执行查询并获取包含满足条件的对象的数组。

代码：

include：获取来自另一个class的数据，如_User
limit：限制返回结果的数量（默认为 100），如query.limit(10)，表示「只获取 10 条」
skip：跳过前page*limit条结果
descending：按 createdAt 降序排列
ascending：按 createdAt 升序排列
equalTo：获取所有owner为当前登录用户的Image

注意： skip 的值越高，查询所需的时间就越长。作为替代方案，可以通过设置 createdAt 或 updatedAt 的范围来实现更高效的翻页，因为它们都自带索引。

💡：关于include？

include

➹：数据存储入门教程 · JavaScript - LeanCloud 文档

➹：查询 · JavaScript - LeanCloud 文档

3）上传历史全局状态管理

import {
  observable,
  action,
  makeObservable
} from "mobx";
import {
  Uploader
} from "../models";
import {
  message
} from "antd";

class HistoryStore {
  constructor() {
    makeObservable(this);
  }
  @observable list = [];
  @observable isLoading = false;
  @observable hasMore = true;
  @observable page = 0;
  limit = 10;

  @action append(newList) {
    this.list = this.list.concat(newList);
  }

  @action find() {
    this.isLoading = true;
    Uploader.find({
        page: this.page,
        limit: this.limit
      })
      .then((newList) => {
        this.append(newList);
        if (newList.length < this.limit) {
          this.hasMore = false;
        }
      })
      .catch((error) => {
        message.error("加载数据失败", error);
      })
      .finally(() => {
        this.isLoading = false;
      });
  }
}

export default new HistoryStore();