关于antd Upload上传组件预览功能的详细说明

 一、使用场景

很多前端的小伙伴会面临解决文件的上传、查看等实际业务，本文章着重从预览功能上为二次封装Upload组件提供便利。

二、用到的API

        <Upload
          listType="picture" // 文件显示样式
          fileList={fileList} // 文件流
          onChange={onChange} // 绑定事件
          onPreview={onPreview} // 单机预览
          onRemove={onRemove} // 删除文件
          ref={uploadRef} // 透传ref
          beforeUpload={(file: any) => {
            return false
          }} // 关闭自动上传
        >
          <Button>点击上传</Button>
        </Upload>

注意：如果是手动上传文件一定要在beforeUpload里关闭自动上传，否则会报上传失败或鼠标悬浮有错误文本

三、功能

1.点击预览

 //  预览功能
const onPreview = async (file: UploadFile) => {
    if (file.isPic) {
      let src = file.url as string
      if (!src) {
        src = await new Promise((resolve) => {
          const reader = new FileReader()
          reader.readAsDataURL(file.originFileObj as any)
          reader.onload = () => resolve(reader.result as string)
        })
      }
      const image = new Image()
      image.src = src
      const imgWindow = window.open(src)
      imgWindow?.document.write(image.outerHTML)
    }
  }

2.判断是否可预览
一般预览功能只针对图片类型文件即判断文件类型追加一个boolean来判断触发点击预览

          if (
              element.contentType === 'image/jpeg'
              || element.contentType === 'image/jpeg'
              || element.contentType === 'image/png'
              || element.contentType === 'image/jpg'
            ) {
              oldFileList.push({
                name: element.name,
                status: 'done',
                uid: element.id,
                url: element.webPath,
                id: element.id,
                isPic: isPic(element.contentType),  // 判断是否可点击预览
              })
            }