頭像上傳

頭像上傳基礎的上傳元件依然使用upload元件，然後圖片裁剪使用React-avatar-editor,樣式我是參照知乎的調整的。

地址：https://github.com/mosch/react-avatar-editor

直接上程式碼：

<AvatarEditor
   ref={this.setEditorRef}
   image={this.state.originImg}
   width={200}
   height={200}
   border={50}
   color={[248, 249, 250, 0.8]}
   borderRadius={200}
   scale
 
={parseFloat(this.state.scale)}
   style={{ cursor: 'move', margin: '10px 0' }}
/>
<Slider
  onChange={this.handleScale}
  min={1}
  max={2}
  step={0.01}
  value={this.state.scale}
  style={{ width: 280, margin: '10px auto' }}
/>

通過upload獲取的base64編碼的圖片，可以直接傳給AvatarEditor的image屬性。然後AvatarEditor提供了多種調整圖片的介面，具體看github文件吧，都有例子。調整後使用editor引數拿到調整後的base64編碼上傳。

我只使用ant-design的Slider實現了個調整大小的功能。至於外部框體可以使用ant-design的Modal實現。

最後補充一下，如何限制只能選到圖片格式的檔案。可以設定upload的accept屬性為image/*。其他格式看這裡：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept