react+antd的Upload 通过证书 上传大文件视频至oss(上传视频)

主要代码

1. form表单的upload组件引入

    <Form.Item label="上传视频">
          {getFieldDecorator('url', {
            getValueFromEvent: e => normFile(e, 500),
            // rules: [{ required: true, message: '请上传' }],
            valuePropName: 'fileList',
            initialValue: fileList,
          })(
            <Upload.Dragger
              accept=".mp4"
              beforeUpload={() => false}
              disabled={flag === 'edit'}
            >
              {
                fileList?.length <= 0 &&
                <>
                  <p className="ant-upload-drag-icon">
                    <Icon type="inbox" />
                  </p>
                  <p className="ant-upload-text">点击或将视频拖到这里上传</p>
                  <p className="ant-upload-hint">仅支持MP4格式视频上传,单个视频小于 
                    500M
                   </p>
                </>
              }
            </Upload.Dragger>
          )}
          {
            videoUrl && fileList?.length <= 0 &&
            <video src={videoUrl} ></video>
          }
      </Form.Item>


2. 处理上传操作

   const normFile = (e, size) => {
    const { file, fileList } = e;
    setFileList(fileList);
    if (!(file.status === "removed")) {
      console.log('file', file)
      uploaVideo().then(res => {  //uploaVideo方法是后端接口返回的证书
        let ossConfig = {
          policy: res.data.policy,
          OSSAccessKeyId: res.data.accessid,
          signature: res.data.signature,
          url: res.data.host,
          dir: res.data.dir,
        };
        const photo = file;  // 获取图片对象
        const photoName = moment().format('YYYYMMDDHHmmss') + '.' + 
        photo?.name.split(".")[1];  // 原图片的名称
        const key = ossConfig.dir + '/' + photoName;  // 存储到oss的视频名称 自己定，必须确保唯一性，不然会覆盖oss中原有的文件   拼接:dir/账号/房间号/文件名(记住一定要加上dir拼接!!!!!!!!!)---不要问为什么 不加你会很惨
        const policy = ossConfig.policy; // 服务器端同事调oss的API，通过接口返回给前端的 policy
        const OSSAccessKeyId = ossConfig.OSSAccessKeyId;  // 服务器端同事调oss的API，通过接口返回给前端的 OSSAccessKeyId
        // const callback = ossConfig.callback;  // 服务器端同事调oss的API，通过接口返回给前端的 callback。这个是需要 oss 触发这个回调来通知服务器操作结果。
        const signature = ossConfig.signature;  // 服务器端同事调oss的API，通过接口返回给前端的 signature。这个就是签名，最关键的。
        const url = ossConfig.url;
        const dir = ossConfig.dir;
        // biu一下，提交给oss
        let param = {
          name: photoName,
          key,
          policy: policy,
          OSSAccessKeyId: OSSAccessKeyId,
          success_action_status: '200',  //必须这么写 不要问为什么
          // callback: callback,
          signature: signature,
          file: photo   //一定在最后面
        };  //顺序最好按照我写的  不要动位置 要不然不保证你能活着走下去..哈哈
        const formData = new FormData();  //以表单的形式传递给oss
        Object.keys(param).forEach((key) => {
          formData.append(key, param[key]);
        });
        // 请求oss上传
        newDbRequest(url, {
          method: 'POST',
          headers: {
          },
          body: formData,
        }).then((res, aaa) => {
          console.log('res', res)
          setVideoUrl(`${url}${key}`) //我使用存在state中的数据 可以根据个人需求做处理
        })
      })
    } else {
      setVideoUrl('')
    }
    return fileList
  };