コンポーネントの組み合わせAntD書き込みUPLOADをアップロード反応

アクションは、画像のURLアドレスを取得するためのインターフェイスを調整することでアップロードコンポーネントをアップロード

setImg GET urlには、保存がバックグラウンドに達しクリック

 

アクション写真のアップロード方法

// アップロードアバター 
    changeImg = INFO => {
         IF（info.file.status === "アップロード" ）{
             この .setState（{ローディング：真へ}）;
             リターン; 
        } 
        IF（info.file.status === " DONE " ）{ 
            LETは{ 
                USERSTORE：setImg} { 
            }は = この.propsを、
            setImg（info.file.response.data.url）; //実際のエンドインターフェイスデータ構造に従ってデータを取得し
             、この .getBase64（info.file.originFileObj 、IMAGEURL =>
                 この .setState（{
                    IMAGEURL、
                    ローディング：偽
                }） 
            ）。
        } 
    }。


    getBase64 =（IMG、コールバック）=> { 
        CONSTリーダー = 新しいFileReaderの（）。
        reader.addEventListener（ "負荷"、（）=> コールバック（reader.result））。
        reader.readAsDataURL（IMG）。
    }。


    beforeUpload =ファイル=> { 
        CONST isJpgOrPng = file.type === '画像/ JPEG' || file.type === '画像/ PNG' ;
        もし（！isJpgOrPng）{ 
            message.error（「あなたは唯一のJPG / PNGファイルをアップロードすることができます！」）; 
        } 
        CONST isLt2M = file.size / 1024/1024 <2 。
        もし（！isLt2M）{ 
            message.error（ '！2メガバイトよりも小さい画像の必須' ）; 
        } 
        戻り isJpgOrPng && isLt2Mと、
    }。

与えます

                               <FormItemの{...} formItemLayoutラベル= { ' 頭'}> 
                                    {getFieldDecorator（ 'アバター' 、{ 
                                        はinitialValue：アバター
                                    }）（


                                         < アップロード
                                            受け入れる。= "JPG、.JPEG、.pngの" 
                                            listType（リストタイプ） =「ピクチャーカード" 
                                            showUploadList = { falseに} 
                                            アクション =" /staffs/UploadFile.json「//バックエンドは、アップロード、戻りURLへのインタフェースを提供します
                                            beforeUpload = { この.beforeUpload} F 
                                            のonChange = { この.changeImg} 
                                            名 = "ファイル" 
                                            ヘッダー = {{ 
                                                許可：sessionStorage.authToken 
                                            }}
                                         > 
                                        {IMAGEURL？<IMG SRC = {IMAGEURL} ALT = "アバター"スタイル= {{幅： '100％'}} />：uploadButton} 
                                        </アップロード>
                                    ）}
                                     <スパン> { 'サポートJPG / GIF / PNG形式'} </スパン> 
                                </ FormItemの>