Как мы обрабатываем изображение с помощью пути к файлу и конвертируем в base64 в перехватчиках реакции - PullRequest
Новая
       105

Как мы обрабатываем изображение с помощью пути к файлу и конвертируем в base64 в перехватчиках реакции

0 голосов
/ 18 июня 2020

Как мы обрабатываем и конвертируем в base64, если мы получаем image with path в React Hook в следующем формате: images\photo-1592376542020.JPG

UserLoginProvider.js

import { UserProfileContext, UserLoginContext } from '../context';

const UserLoginProvider = ({children}) => {

    const [loginPhoto, setLoginPhoto] = useState({ photo:''});

     const value = useMemo(() => ({
        loginPhoto, setLoginPhoto
    }), [loginPhoto]);


    return (
       <UserLoginContext.Provider value={value}>
           {children}
       </UserLoginContext.Provider>
    )   
}
export default UserLoginProvider;

Navigation.js

const [loginImgSrc, setLoginImgSrc] = useState(null);
const { loginPhoto } = useContext(UserLoginContext);

// While doing console.log("Print here:"+loginPhoto);  displays [object object ] 
    useEffect(() => {
            if (loginPhoto.photo) {
            const reader = new FileReader();
            reader.addEventListener('load', () => {
               setLoginImgSrc(reader.result);
               console.log("LoginImage:"+reader.result);
               localStorage.setItem("loginImgData", reader.result);
            });
            reader.readAsDataURL(loginPhoto.photo);
            }
        }, [loginPhoto.photo])

        var loginImage = localStorage.getItem('loginImgData');

<span className="image_login_link"><img className="nav_profile" src={loginImage}></img></span>
...