---
tags: N108 Component
---
# UploadImg.jsx
- Member 切換流程圖 *(原本 component 名稱把 Member 去掉)*
- 可以配合 PPT 14頁

digraph Pageswitch {
                nodesep=0.5
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Profile->{TopBar IMG_Name Content}
                Content->{info LearnHistory WatchHistory NotelistHistory}
                info->{infobtn}
                NotelistHistory->{NoteHistory}
                {rank=same;UploadImg IMG_Name}
                UploadImg [color=orange, fontsize=22, shape=box,style=filled, fillcolor=Bisque]
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| ReactCrop | <font color='RosyBrown'>external component</font> | 照片正方形切割 | react-image-crop |
| Cbtn | <font color='BlueViolet'>component</font> | wrapper close button | tool/Closebtn.jsx |
| Resizer | <font color='RosyBrown'>external component</font> | 照片 resizer | react-image-file-resizer |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `src` | <font color='red'>image</font> | 照片 src | `null` |
| `crop` | <font color='Gold'>json value</font> | 切割 json value，包含：unit (單位)、width (寬)、aspect (比例)| `{ unit: '%', width: 30, aspect: 9 / 9}` |
| `blob` | <font color='purple'>blob</font> | 影像、聲音或多媒體檔案| `""` |

## 獨立 function
- ==大部份不是[name=小鄧]撰寫==

| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|onSelectFile()|剛上傳的圖片resize 並存入 state |否|
|onImageLoaded()|ReactCrop 參數|否|
|onCropComplete()|切割照片流程**進入點**|否|
|onCropChange()|ReactCrop 參數|否|
|makeClientCrop()|new 一個新的容器放要切割的照片|是|
|getCroppedImg()|切割演算法，並將切割好的 blob 存入 state|否|
|myuploadIMG()|將切割好的正方形照片上傳到 API server，最後將 wrapper 關掉|是|
## API 數量表格
| 名稱 | 類型 | 描述 | 位於 |
|:--|:--|:--|:--|
|uploadIMG()|<font color='DarkOrange'>post</font>|上傳照片，props 傳入|myuploadIMG()|
## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| clickwrapper | <font color='Green'>function</font> | 開啟或關閉 wrapper |
### return
- wrapper 關閉按鈕 以及 選擇圖片 按鈕
- 

<Cbtn Clickbtn={clickwrapper}></Cbtn>
<div className="dis-center inputimg">
    <input id="imginput" type="file" accept="image/*" onChange={this.onSelectFile} />
</div>

- 全圖片顯示區 (resize 顯示) (124行 ~ 135行)
- crop 過後的圖片 (136行 ~ 140行)
- 

<div className="dis-center uploadcontainter">
    {src &&
        <ReactCrop
            src={src}
            crop={crop}
            ruleOfThirds
            onImageLoaded={this.onImageLoaded}
            onComplete={this.onCropComplete}
            onChange={this.onCropChange}
        />
    }
</div>
<div className="reviewimg">
    <div>
        {croppedImageUrl && <img className="faceimg dis-center2" alt="Crop" src={croppedImageUrl} />}
    </div>
</div>