React 采用ant design 的Upload上传，对上传文件大小时长做判断。

提示：开发经验分享

---

前言

简述：上传图片，视频时判断大小，时长是否符合
场景：利用React 结合antd 的上传组件开发上传视频和图片时，对图片大小视频时长等进行判断是否符合，符合上传，不符合提示后取消上传。

---

一、主要问题？

示例：视频时长判断大小时，会存在双层函数嵌套，内部函数为异步的情况，单纯return 是否符合 是不行的。

二、使用步骤

1.代码展示

代码如下（示例）：

  //视频时长
  const isSize = (file) => {
    return new Promise((resolve, reject) => {
      const videoUrl = URL.createObjectURL(file)
      const videoObj = document.createElement('video')
      videoObj.preload = 'metadata'
      videoObj.src = videoUrl
      videoObj.onloadedmetadata = () => {
        URL.revokeObjectURL(videoUrl)
        let times = Math.round(videoObj.duration)
        console.log(times)
        if (parseFloat(times) > 30) {
          message.warning("上传的视频应在30s内");
          reject();
        }
        resolve()
      }
    });
}
// 上传参数
const uploadOpts = {
    // name: "file",
    action: `${Cong.apiHost}${actionUrl}`,
    headers: {
      Authorization: XXX.XXX(["CongToken"])["CongToken"],
    },
    showUploadList: false,
    beforeUpload: (file, fileList) => {
      setFileName(file.name);
      setFileType(file.type);
      if (file.size > 20971520) {
        message.error("上传文件不得超过2M");
        return false
      }
        return isSize(file);
    },
    data: { file_type: fileType, file_name: fileName, ...uploadData },
    onChange(info) {
      // console.log(info)
      const { status } = info.file;
      if (info.file.status == "uploading") {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        if (Number(info.file.response.status)) {
          message.error(info.file.response.message);
        } else {
          message.success("上传成功");
        }
      }
    },
    accept: ".jpg ,.png,.pdf,.docx,.mp4,.mp3,.xls,.doc,.xlsx",
  };

<Upload style={{ width: 60, height: 60, boxSizing: "border-box" }} {...uploadOpts}></Upload>

2.原因

如下：

videoObj.onloadedmetadata 存在异步问题，在外层调用函数中设置状态值最后return 是不能拿到当前时长判断状态的，所以需要利用Promise 来解决判断不符合后能及时阻止上传。

---

总结

提示：以上是个人开发遇到的问题和解决方法
例如：以上就是今天要讲的内容，本文仅仅简单介绍了判断上传规格时长时存在的异步问题的解决，程序写法肯定不止一种如果有更好的写法可以评论，如果能帮到你，请为我三连。