TIL 20211112[第9958便]

プロファイルアップロードエラー

誤り[フォルダを選択](Select Folder)をクリックして写真を選択し、[フォルダを選択](Select Folder)を再度クリックしてキャンセルするとエラーが発生します.

エラーの原因
ファイルを選択したら、フォルダを開いてファイルを再選択し、[キャンセル](Cancel)をクリックすると、ファイルがundefinedになります.それなら読者readAsDataURL(file);この失敗の誤りが現れた.

ソリューション

 // 기존 파일 미리보기
  const filePreview = (e) => {
  const reader = new FileReader();
  const file = fileInput.current.files[0];
  reader.readAsDataURL(file);
  reader.onloadend = () => {
  //  console.log(reader.result);
  dispatch(setPreview(reader.result));
  };
  setFileData(e.target.files[0]);
  e.target.value = '';
  };

既存のコードで行うと上記の画像のエラーが発生しました.

const [fileData, setFileData] = React.useState(null);

  // 파일 미리보기 (오류 해결 코드)
  const filePreview = (e) => {
    const reader = new FileReader();
    const file = fileInput.current.files[0];
    //file이 undefined일 경우 예외처리
    if (file === undefined) {
      dispatch(setPreview(reader.result));
      setFileData(file);
    } else {
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        //  console.log(reader.result);
        dispatch(setPreview(reader.result));
        setFileData(file);
      };
    }
  };
  
   if (fileData) {
      formData.append('profile', fileData);
    }

ファイルを選択した後にフォルダを開いて再びファイルを選択し、[キャンセル](Cancel)をクリックすると、ファイルはundefinedになり、そうでない場合はreaderになります.readAsDataURL(file);この失敗の誤りが現れた.したがって、fileが未定義の場合、例外処理が追加されます.fileがundefinedの場合、エラーreaderが発生します.readAsDataURL(file);この部分は削除されました.reader.readAsDataURL(file);この部分は削除されているので、心を変えてキャンセルを押すと元の保存した写真に戻ります.
の上の写真を通して、間違いなくキャンセルをクリックしても、回復がよく確認できます.😊
今日の経験では,この程度の誤りが解決されると,ユーザも利用可能かどうかを考慮して決定する.画像をアップロードして変更し、再度画像を変更するために「ファイルアップロード」をクリックし、「キャンセル」をクリックすれば、最初の画像に戻ることができると思います.最初の画像に戻ると、ユーザは、自分が望む画像に変更したり、自分の考え通りに再選択したりすることができる.したがって、後でサービスの導入、ユーザーの受信、ユーザーのフィードバックの受信、メンテナンス時にこれらのフィードバックがある場合は、これらのフィードバックを再変更する必要があります.サービス導入後にどのようなユーザーフィードバックがあるのか気になりますが、ユーザーフィードバックに基づいて修正するのも面白いです!😀