Ant Design Upload 组件将图片缩放到 200x200 [React]答案

【问题标题】：Ant Design Upload component rescales images to 200x200 [React]Ant Design Upload 组件将图片缩放到 200x200 [React]
【发布时间】：2023-01-20 03:50:06
【问题描述】：

我在 Ant Design <Upload /> 组件遇到了一个问题。当我上传图片时，它会在the Network console 发送两个 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 解决了这个问题，我不知道为什么但是 okej :)。

我还能做些什么来解决这个问题？提前致谢。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

是否成功纠正了这个错误？我有同样的问题。

【讨论】：

José Genilton，请不要添加我也是作为答案。它实际上并没有提供问题的答案。如果您有不同但相关的问题，请ask它（如果它有助于提供上下文，请参考此问题）。如果你对这个具体问题感兴趣，你可以upvote它，留下comment，或者一旦你有足够的reputation就开始bounty。