React antd upload组件上传视频并实现视频预览-Toy模板网

这篇具有很好参考价值的文章主要介绍了React antd upload组件上传视频并实现视频预览。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

记录问题：antd的upload组件文档中对于视频的上传预览没有明确的文档demo，在这里记录一下

项目需求：支持图片及视频的上传并实现预览，点击上传后不会立即请求接口上传资源，后续点击确定再上传

上代码文章来源地址https://www.toymoban.com/news/detail-767194.html

                <ProFormUploadButton
                  name="upload"
                  label="广告"
                  max={1}
                  fieldProps={{
                    accept: 'image/png,video/mp4',
                    name: 'file',
                    listType: 'picture-card',
                    maxCount: 1,
                    withCredentials: false,
                    onPreview: handlePreview,
                    previewFile: (file) => {
                      if (file.type === 'video/mp4') {
                        return new Promise((resolve, reject) => {
                          const reader = new FileReader();
                          reader.readAsDataURL(file);
                          reader.onload = () => resolve(reader.result as string);
                          reader.onerror = (error) => reject(error);
                        });
                      } else {
                        return new Promise(async (resolve) => {
                          const img = await getBase64(file as RcFile);
                          resolve(img);
                        });
                      }
                    },
                    fileList: fileList,
                    // eslint-disable-next-line @typescript-eslint/no-shadow
                    onChange: ({ fileList }) => {
                      setFileList(fileList);
                    },
                    beforeUpload: () => {
                      return false;
                    },
                  }}
                  icon={<ToTopOutlined style={{ color: '#745CC3', fontSize: 24 }} />}
                  title=""
                  rules={[{ required: true, message: '请上传图片/视频' }]}
                />

const handleCancel = () => {
    setPreviewOpen(false);
    setPreviewVideoOpen(false);
    videoRef.current.pause();
  };

  const handlePreview = async (file: any) => {
    if (file.type === 'video/mp4') {
      const current = file.originFileObj;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(current);
      fileReader.onload = function (e) {
        setPreviewVideo(e.target?.result);
        setPreviewVideoOpen(true);
        setPreviewVideoTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
      };
    } else {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj as RcFile);
      }
      setPreviewImage(file.url || (file.preview as string));
      setPreviewOpen(true);
      setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
    }
  };

        <Modal
          open={previewOpen}
          zIndex={9999}
          title={previewTitle}
          footer={null}
          centered={true}
          onCancel={handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        <Modal
          open={previewVideoOpen}
          zIndex={9999}
          title={previewVideoTitle}
          footer={null}
          centered={true}
          width={540}
          onCancel={handleCancel}
        >
          <video src={previewVideo} controls width={500} height={500} ref={videoRef}>
            您的浏览器不支持 video 标签。
          </video>
        </Modal>

到了这里，关于React antd upload组件上传视频并实现视频预览的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！