base64로 이미지를 업로드하고 formik으로 검증하는 방법

Formik으로 이미지를 업로드하고 js에 반응할 수 있습니다.

이제 Base64는 4개의 6비트 Base64 숫자로 표현할 수 있는 24비트 시퀀스로 이진 데이터(보다 구체적으로 8비트 바이트 시퀀스)를 나타내는 이진-텍스트 인코딩 방식 그룹입니다.

이제 우리는 하나의 이미지를 만들 것입니다.

const singleImage = () => {

 const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

  const handleIcon = async (e, setFieldValue) => {
    const file = e.target.files[0];
       //check the size of image 
    if (file?.size/1024/1024 < 2) {
      const base64 = await convertToBase64(file);
      setFieldValue('profile_image', base64);
    }
    else {
      toast.error('Image size must be of 2MB or less');
    };
  };

  return (
       <div className="mb-3 form-group">
          <label className="required">Upload Photo</label>
               <Field name='profile_image'>
                   {({ form, field }) => {
                     const { setFieldValue } = form
                        return (
                          <input
                            type="file"
                             className='form-control'
                              required
                          onChange={(e) => handleIcon(e, setFieldValue)}
                             />
                            )
                          }}
                     </Field>
                   <div className="text-danger">
               <ErrorMessage name="profile_image" />
         </div>
     </div>
 )
};

그래서 여기에서 formik이 이미지를 처리한 다음 onchange 함수에서 이미지를 가져와 크기를 확인하고 크기가 조건보다 작으면 convertToBase64 함수가 이미지를 문자열로 base64로 변환하므로 이미지가 base64로 변환됩니다.

const multipleImage = () => {

export const convertToBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        resolve(fileReader.result);
      };
      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

const handleProfile = async (e, setFieldValue) => {
    const file = e.target.files[0];
    if (file?.size / 1024 / 1024 < 2) {
        const base64 = await convertToBase64(file);
        setFieldValue('image', base64);
    }
    else {
        toast.error('Image size must be of 2MB or less');
    };

return (
          <div className="mb-3 form-group">
            <label>Upload Cover Photo</label>
            <Field name={name}>
                {({ form, field }) => {
                    const { setFieldValue } = form
                    return (
                        <input
                            type="file"
                            className='form-control'
                            onChange={(e) => handleProfile(e, setFieldValue)}
                        />
                    )
                }}
            </Field>
        </div>
)
}

결론

따라서 formik 데이터에서 base64로 변환된 이미지를 찾을 수 있습니다.