プロジェクト14日目

19274 ワード

テキストリンク

最終品目14日目(21-12-06)

user reducsキットロジックの構築(4)

📖 プロファイル写真リクエストの実装(2)

Bufferの形をした画像を私のページに表示

ログイン時にサーバから送信された画像ファイルを受信する.

画像ファイルはBufferフォーマットなので、Stringに変換する必要があります.

この画像を

imgタグのsrc属性に埋め込むことを目的としている.

// MyPageProfileImg
  const test = user.profile_image.data;
  const base64String = btoa(String.fromCharCode(...new Uint8Array(test)));
  return (
    <>
      <MyPageProfileImgBlock>
        <div className="img-box">
          <img 
            src={
              previewProfileImage ?
              previewProfileImage :
              `data:image/png;base64,${base64String}`
            } 
            alt="profile"
            style={{ backgroundImage : previewProfileImage }}  
          />
        </div>  
        <div className="input-box">
          <label htmlFor="file">
            사진 업데이트하기
          </label>
          <input 
            type="file"
            accept="image/*"
            id="file"
            name="file"
            style={{ display: 'none' }}
            onChange={onFileChange}
          />
        </div>
      </MyPageProfileImgBlock>

▼▼誤ったハンドルリング

:プロファイルの変更要求を送信した後、ログアウト後、再度私のページにアクセスするとcallstackエラーが発生します.

📖 ログインできないエラーが発生しました

▼▼誤ったハンドルリング

:プロファイルを変更した後、ログインしようとすると、サーバにエラー(500)が発生し、ログインが正常に動作しません.

joinで会員加入に成功した後、すぐにログインを試み、ログインに問題はありません.

以下のコードは、サーバ端末console.log出力されるアカウント情報です.

DATA :  User {
  dataValues: {
    id: 5,
    email: '[email protected]',
    nickname: 'aaaa',
    password: 'aaaaaa1!',
    admin: false,
    profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',
    createdAt: 2021-12-07T00:38:17.000Z,
    updatedAt: 2021-12-07T00:38:17.000Z
  },
  _previousDataValues: {
    id: 5,
    email: '[email protected]',
    nickname: 'aaaa',
    password: 'aaaaaa1!',
    admin: false,
    profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',
    createdAt: 2021-12-07T00:38:17.000Z,
    updatedAt: 2021-12-07T00:38:17.000Z
  },
  _changed: Set(0) {},
  _options: {
    isNewRecord: false,
    _schema: null,
    _schemaDelimiter: '',
    raw: true,
    attributes: [
      'id',
      'email',
      'nickname',
      'password',
      'admin',
      'profile_image',
      'createdAt',
      'updatedAt'
    ]
  },
  isNewRecord: false
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTYzODkyMzkzNn0.3THHKh4PODioWriQF6Oaz5obsOH_IO000w56ufdekbM
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTY0MTQyOTUzNn0.sGRFkiznbhwsBaRxqdMawR-W8NVYQAmP_6xs3zVSOcM
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4Mzc1MzYsImV4cCI6MTYzODkyMzkzNn0.3THHKh4PODioWriQF6Oaz5obsOH_IO000w56ufdekbM

profile_image鍵、経路は以下の通り.

profile_image: '/Users/jiwoo/Desktop/GongJang/server/models/../source/profileImg.jpg',

マイコンに存在するファイルパス.

ログイン後、私のページにログインし、プロファイルを変更します.

現在、ログアウトを行い、ログインを再テストします.

以下のコードは、サーバ端末console.log出力されるアカウント情報です.

DATA :  User {
  dataValues: {
    id: 5,
    email: '[email protected]',
    nickname: 'aaaa',
    password: 'aaaaaa1!',
    admin: false,
    profile_image: 'uploads/d1c781cbe792825d6c596274d0a5fca0',
    createdAt: 2021-12-07T00:38:17.000Z,
    updatedAt: 2021-12-07T00:51:51.000Z
  },
  _previousDataValues: {
    id: 5,
    email: '[email protected]',
    nickname: 'aaaa',
    password: 'aaaaaa1!',
    admin: false,
    profile_image: 'uploads/d1c781cbe792825d6c596274d0a5fca0',
    createdAt: 2021-12-07T00:38:17.000Z,
    updatedAt: 2021-12-07T00:51:51.000Z
  },
  _changed: Set(0) {},
  _options: {
    isNewRecord: false,
    _schema: null,
    _schemaDelimiter: '',
    raw: true,
    attributes: [
      'id',
      'email',
      'nickname',
      'password',
      'admin',
      'profile_image',
      'createdAt',
      'updatedAt'
    ]
  },
  isNewRecord: false
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4MzgzNTUsImV4cCI6MTYzODkyNDc1NX0.DNSvAcjytxVGdzajlqOGzK5xCNWcK6uei0mQNLwM8ag
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NSwiZW1haWwiOiJhYUBhYS5jb20iLCJpYXQiOjE2Mzg4MzgzNTUsImV4cCI6MTY0MTQzMDM1NX0.bc9w-hs0nbu4Bcz5cDjEQ_ZrkWEgUi96UMK2RGSasz8
undefined