Ant Design Upload 组件将图像重新缩放至 200x200 [React]

Question

我在 Ant Design

<Upload />

组件中遇到了一个问题。当我上传图像时，它会在 发送两个 Img 类型的请求。第一个包含我的原始图像（在 650x650 图像大小下测试），第二个包含转换为 200x200 的图像。这是我的问题：为什么图像会被重新调整为较低的分辨率以及如何防止这种情况发生？如果需要的话，我想上传透明的原始图像。

在我的例子中，

Upload

组件用于上传单个图像。组件放置在模态组件上，这就是我准备

dummyRequest

的原因。

const UploadImage = ({
  defaultValue,
  maxFilesAmount,
}: IUploadImageProps<any>): JSX.Element => {
  const [fileList, setFileList] = useState<IUploadFile<any>[]>(
    defaultValue ?? []
  )

  const onChange = useCallback(
    (info: IUploadChangeParam<IUploadFile<unknown>>): void => {
      setFileList(info.fileList)
    },
    [setFileList]
  )

  const onPreview = useCallback(async (file: IUploadFile): Promise<void> => {
    let src: string | undefined = file?.url ?? file?.thumbUrl ?? ''

    if (!_.isNull(src)) {
      src = await convertImportImageToBase64(src)
    }

    const image: HTMLImageElement = new Image()
    const imgWindow: Window | null = window.open(src)

    image.src = src
    imgWindow?.document.write(image.outerHTML)
  }, [])

  const dummyRequest = useCallback(({ onSuccess }: IUploadRequestOption) => {
    setTimeout(() => {
      //@ts-ignore
      onSuccess('ok')
    }, 0)
  }, [])

  const beforeUpload = useCallback((): false => {
    //Required to ignore Ant Desing default converting uploaded image
    //For example that removes transparency from png files
    return false
  }, [])

  return (
    <Upload
      accept={'.jpg, .jpeg, .png'}
      listType={'picture-card'}
      beforeUpload={beforeUpload}
      fileList={fileList}
      onChange={onChange}
      onPreview={onPreview}
      customRequest={dummyRequest}
    >
      {_.size(fileList) < (maxFilesAmount ?? 1) && 'Upload'}
    </Upload>
  )
}

一开始我还遇到了 .png 图像透明度丢失的问题。图像仍被定义为 png，但透明背景为白色。使用

beforeUpload

修复了这个问题，我不知道为什么，但是 okj:)。

我还能做些什么来解决这个问题？预先感谢。

Answer 1

如果有人像我一样在寻找决策：你需要添加

previewFile

属性，这将返回所需的 url 字符串

const getBase64 = (file: RcFile): Promise<string | ArrayBuffer> =>
        new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });

    <Upload
        beforeUpload={() => false}
        listType="picture-card"
        multiple={true}
        fileList={fileList}
        previewFile={getBase64 as any}
        onPreview={handlePreview}
        onChange={handleChange}
    >
            {fileList.length >= 3 ? null : uploadButton}
    </Upload>