有没有办法让红色边框消失 ant design upload

Question

我正在使用 antd 的上传组件。无论出于何种原因，即使提交图像成功更改，它也会将上传文件显示为红色。我尝试从 beforeUpload 返回 false，但如果我在使用 antd-img-crop 时执行此操作，裁剪功能将不起作用。如何在\xc2\xa0上传文件时去掉红色\xc2\xa0，同时保留ant-img-crop功能？\n如何让上传图片时边框不变成红色？

\n

\n

这是代码

\n

const Setting = () => {\n  const [memberData, setMemberData] = useState<MemberDataProps>();\n  const [name, setName] = useState(\'\');\n  const [email, setEmail] = useState(\'\');\n  const [phoneNumber, setPhoneNumber] = useState(\'\');\n  const [expiredDate, setExpiredDate] = useState(\'\');\n  const [isPhoneInvalid, setIsPhoneInvalid] = useState(false);\n  const [isSubscribe, setIsSubscribe] = useState(false);\n  const [newPicture, setNewPicture] = useState<any[]>([]);\n\n\n  const handleImageUpload = async (info: any) => {\n    let fileList = [...info.fileList];\n    fileList = fileList.slice(-1);\n\n    fileList = fileList.map((file) => {\n      if (file.response) {\n        file.url = file.response.url;\n      }\n      return file;\n    });\n\n    setNewPicture(fileList);\n  };\n\n  const onPreview = async (file: UploadFile) => {\n    let src = file.url as string;\n    if (!src) {\n      src = await new Promise((resolve) => {\n        const reader = new FileReader();\n        reader.readAsDataURL(file.originFileObj as RcFile);\n        reader.onload = () => resolve(reader.result as string);\n      });\n    }\n    const image = new (Image as any)();\n    image.src = src;\n    const imgWindow = window.open(src);\n    imgWindow?.document.write(image.outerHTML);\n  };\n\n\n  console.log(newPicture);\n  const toast = useToast();\n\n  const navigate = useNavigate();\n\n  const handlePhoneNumber = (value: string) => {\n    const isNumber = value.match(/^[0-9\\b]+$/);\n\n    setPhoneNumber(value);\n\n    if (isNumber) {\n      setIsPhoneInvalid(false);\n    } else {\n      setIsPhoneInvalid(true);\n    }\n\n    if (value.length < 11) {\n      setIsPhoneInvalid(true);\n    }\n  };\n\n  const handleSubmit = async () => {\n    const formData = new FormData();\n\n    formData.append(\'name\', name);\n    formData.append(\'phoneNumber\', phoneNumber);\n    if (newPicture) {\n      formData.append(\'profilePhoto\', newPicture[0]?.originFileObj || newPicture[0]?.url);\n    }\n    formData.append(\'subscribeNewsletter\', String(isSubscribe));\n\n    try {\n      await fetchFormData({\n        method: \'PATCH\',\n        path: \'member/data\',\n        data: formData,\n      }).then((response) => {\n        if (!response.error) {\n          toast({\n            title: \'Berhasil\',\n            description: \'Profil Anda telah berhasil diperbaharui\',\n            status: \'success\',\n            duration: 9000,\n            isClosable: true,\n          });\n          getMemberData();\n        } else {\n          toast({\n            title: \'Error\',\n            description: response.message,\n            status: \'error\',\n            duration: 9000,\n            isClosable: true,\n          });\n        }\n      });\n    } catch (error) {\n      toast({\n        title: \'Error\',\n        description: error.message,\n        status: \'error\',\n        duration: 9000,\n        isClosable: true,\n      });\n    }\n  };\n\n  const getMemberData = async () => {\n    try {\n      await fetchRequest({ method: \'GET\', path: \'member\' }).then((response) => {\n        if (!response.error) {\n          setMemberData(response);\n          setPhoneNumber(response.phoneNumber);\n          setExpiredDate(\n            dayjs(response.membershipValidEnd).format(\'DD MMMM YYYY\')\n          );\n          setEmail(response.email);\n          setName(response.name);\n          setIsSubscribe(response.subscribeNewsletter);\n        }\n      });\n    } catch (error) {\n      console.log(error);\n    }\n  };\n\n  useEffect(() => {\n    getMemberData();\n  }, []);\n\n  return (\n    <Box>\n      <Box h="30px" paddingLeft={{ base: \'10px\', lg: \'3%\' }} w="100%">\n        <CustomBreadcrumb breadcrumbs={BREADCRUMB_PENGATURAN} />\n      </Box>\n      <Stack\n        w={{ xl: \'100%\' }}\n        direction={[\'column\', \'row\']}\n        spacing={{ md: \'50px\', base: \'30px\' }}\n        paddingLeft={{ base: \'3%\' }}\n        paddingRight={{ base: \'3%\' }}\n        paddingTop={{ base: \'0px\', lg: \'20px\' }}\n      >\n        <Box\n          w={{ md: \'20%\' }}\n          h="400px"\n          display={{ md: \'inline\', base: \'none\' }}\n        />\n        <Box w="100%">\n          <VStack w="100%" marginBottom="10px">\n         \n\n<ImgCrop cropShape="round">\n      <Upload\n        action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"\n        name="Profile Picture"\n        listType="picture-circle"\n        fileList={newPicture}\n        onChange={handleImageUpload}\n        onPreview={onPreview}\n        // beforeUpload={()=> false}\n        showUploadList={{\n          showPreviewIcon:false\n        }}\n       \n      >\n        {newPicture.length < 1 && \'+ Edit\'}\n      </Upload>\n      \n    </ImgCrop>\n \n          </VStack>\n          <VStack align="start">\n            <Text className="fontSemiBold" fontSize={{ lg: \'md\', base: \'sm\' }}>\n              Name\n            </Text>\n            <InputGroup paddingTop="5px" zIndex={0}>\n              <InputLeftElement\n                pointerEvents="none"\n                children={<Image src={imgUsernameIcon} w="30%" />}\n                paddingTop="5px"\n              />\n              <Input\n                type="text"\n                placeholder="Masukkan Nama"\n                _focus={{ boxShadow: \'none\', borderColor: RED }}\n                fontSize={{ lg: \'md\', base: \'sm\' }}\n                value={name}\n                onChange={(e: any) => setName(e.target.value)}\n                errorBorderColor={RED}\n                isInvalid={name === \'\'}\n              />\n            </InputGroup>\n            <Text className="fontSemiBold" fontSize={{ lg: \'md\', base: \'sm\' }}>\n              Email\n            </Text>\n            <InputGroup paddingTop="5px" zIndex={0}>\n              <InputLeftElement\n                pointerEvents="none"\n                children={<EmailIcon color="#AAAAAA" />}\n                paddingTop="5px"\n              />\n              <Input\n                type="email"\n                placeholder="Masukkan Email"\n                _focus={{ boxShadow: \'none\', borderColor: RED }}\n                fontSize={{ lg: \'md\', base: \'sm\' }}\n                value={email}\n                disabled\n              />\n            </InputGroup>\n            <Checkbox\n              isChecked={isSubscribe}\n              onChange={(e: any) => setIsSubscribe(e.target.checked)}\n              colorScheme="red"\n            >\n              Kirimkan saya berita rutin dari Astagatra Institute\n            </Checkbox>\n            <Text className="fontSemiBold" fontSize={{ lg: \'md\', base: \'sm\' }}>\n              Nomor Telepon\n            </Text>\n            <InputGroup paddingTop="5px" zIndex={0}>\n              <InputLeftElement\n                pointerEvents="none"\n                children={<PhoneIcon color="#AAAAAA" />}\n                paddingTop="5px"\n              />\n              <Input\n                type="text"\n                placeholder="Masukkan Nomor HP"\n                _focus={{ boxShadow: \'none\', borderColor: RED }}\n                fontSize={{ lg: \'md\', base: \'sm\' }}\n                value={phoneNumber}\n                onChange={(e: any) => handlePhoneNumber(e.target.value)}\n                isInvalid={isPhoneInvalid}\n                errorBorderColor={RED}\n              />\n            </InputGroup>\n            <Text className="fontSemiBold" fontSize={{ lg: \'md\', base: \'sm\' }}>\n              Masa Berlaku Keanggotaan\n            </Text>\n            <InputGroup paddingTop="5px" zIndex={0}>\n              <InputLeftElement\n                pointerEvents="none"\n                children={<CalendarIcon color="#AAAAAA" />}\n                paddingTop="5px"\n              />\n              <Input\n                type="text"\n                placeholder="Masa Berlaku Keanggotaan"\n                _focus={{ boxShadow: \'none\', borderColor: RED }}\n                fontSize={{ lg: \'md\', base: \'sm\' }}\n                value={expiredDate}\n                disabled\n              />\n            </InputGroup>\n            <Text className="fontSemiBold" fontSize={{ lg: \'md\', base: \'sm\' }}>\n              Password\n            </Text>\n            <Button\n              rightIcon={<ChevronRightIcon color={GREY} />}\n              w="100%"\n              bg={LIGHTGREY}\n              color={GREY}\n              _focus={{ boxShadow: \'none\' }}\n              justifyContent="space-between"\n              onClick={() => navigate(MEMBER_SETTING_RESET_PASSWORD)}\n            >\n              <Text>Ubah Password</Text>\n            </Button>\n            <Box textAlign="end" w="100%">\n              <CustomButton\n                text="SIMPAN"\n                variant="red"\n                icon="none"\n                w="150px"\n                onClick={handleSubmit}\n              />\n            </Box>\n          </VStack>\n        </Box>\n        <Box\n          w={{ md: \'20%\' }}\n          h="400px"\n          display={{ md: \'inline\', base: \'none\' }}\n        />\n      </Stack>\n    </Box>\n  );\n};\n\nexport default Setting;\n

\n

Answer 1

您应该将组件action中的 prop替换Upload为后端上传路由，而不是指向mocky.ioantd，这样 antd 就会自动将您的图像上传到此 url。

您可以在此处的antd 文档中找到示例