FileReader.readAsDataURL（）

1. antdコンポーネントは、アップロードに実装します

        { 
          avatarVisible
           && < モーダル
          タイトル = "上传头像" 
          可視 = {avatarVisible} 
          OnOK呼び出し = { この.onUpload} 
          onCancel = { この.onCancel} 
          クラス名 = {styles.modalBox} 
          bodyStyle属性 = {{高さ：500 }}
           > 
            < アップロード
              名 =「アバター」
              listType（リストタイプ） =「ピクチャーカード」
              クラス名 =「アバターアップローダー」
              showUploadList = {偽} 
              beforeUpload = { この.beforeUpload}
                   > 
                の<button> 
                   选择图片
                 </ボタン> 
            </アップロード> 
            <行> 
              <コルスパン= {12}> 
                <スパン> 
                支持JPG、GIF、PNG格式、小于2M
                 </スパン> 
                 <DIVクラス名= {styles.leftContainer}> 
                    {IMAGEURL？<IMG SRC = {IMAGEURL} ALT = "アバター"スタイル= {{幅： '100％'}} />：NULL} 
                 </ div> 
              </コル> 
              <コルスパン= {12}>
                      {IMAGEURL？<IMG SRC = {IMAGEURL} ALT = "アバター"スタイル= {{幅： '100％'}} />：NULL} 
                  </ div> 
              </コル> 
            </ ROW> 
          </モーダル> 
}

プロパティは、アップロードし、レンダリングを解析する前にファイルを取得するためのbeforeUploadの方法の主な用途

// 解析为BASE64位 
 getBase64 =（IMG、コールバック）=> { 
    CONSTリーダー = 新しいFileReaderの（）。
    reader.addEventListener（ '負荷'、（）=> コールバック（reader.result））。
　　//读取文件
    reader.readAsDataURL（IMG）; 
  } 
//上传之前
   beforeUpload =ファイル=> { 
    CONST {のfileList} = この.state。
    この .getBase64（ファイル、IMAGEURL =>
       この.setState（{ 
        IMAGEURL、
        のfileList：[...のfileList、ファイル]、
        // ローディング：偽
      }） 
    ）。
    リターン 偽; 
  }

リサイクルAJAX要求、アップロード

onUpload =（）=> { 
    CONST {のfileList} = この.state。
    constのFORMDATA = 新しいいるFormData（）; 
    fileList.forEach（ファイル => { 
      formData.append（ 'ファイル[]' 、ファイル）; 
    }）; 

    この.setState（{
       // アップロード：真、
    }）。
    // あなたが好きなAJAXライブラリを使用することができ 
    、要求を（ 'https://www.mocky.io/v2/5cc8019d300000980a055e76' 、{ 
      方法： 'ポスト' 、
      PROCESSDATA：偽、
      データ：FORMDATA、
      成功：（） =>{
         この.setState（{ 
          のfileList：[] 
          // アップロード：偽
        }）。
        message.success（ 'が正常にアップロードします。' ）; 
      }、
      エラー：（） => {
         この.setState（{
           // アップロード：偽
        }）。
        message.error（ 'アップロードに失敗しました。' ）; 
      } 
    }）。
  }。

2.使用して達成されるJS

<！DOCTYPE HTML> 
<HTML> 
<HEAD> 
<メタ文字コード= "UTF-8"> 
<タイトル>单图片上传预览</ TITLE> 
</ HEAD> 
<BODY> 
<DIV ALIGN = "センター"> 
<IMG幅= "400"高さ= "250" ID = "xmTanImg" /> <BR/> 
の<input type = "ファイル" ID = "PIC" NAME = "PIC"のonchange = "xmTanUploadImg（この）" /> 
<入力タイプ= "ボタン"値= "上传图片" /> <br /> 
</ div> 
<SCRIPT> // 选择图片、马上预览関数xmTanUploadImg（OBJ）{
         VARのファイル= obj.files [0 ]。
          // ファイル。
    
    FileReaderの（）;
         //はファイル処理方法読み取る 
        reader.onloadstart = 関数（E）{ 
            にconsole.log（ "読取開始...." ）; 
        } 
        reader.onprogress = 関数（E）{ 
            にconsole.logを（ "で....読み取り" ）; 
        } 
        reader.onabort = 関数（E）{ 
            にconsole.log（ "リード割り込み.... " ）; 
        } 
        reader.onerror = 関数（E）{ 
            にconsole.log（ "....例外を読み取ります" ）; 
        }
        reader.onload = 関数（E）{ 
            にconsole.log（ "成功读取...." ）。
            VaRの IMG =のdocument.getElementById（ "xmTanImg" ）; 
            img.src = e.target.result。
            // 或者img.src = this.result。//e.target ==この
        } 
        reader.readAsDataURL（ファイル）
    }
 </ SCRIPT> 
</ body> 
</ HTML>

最初のプレビューファイルをアップロードする前に

FileReader.readAsDataURL（）

おすすめ