react-alioss/README.md

说明： 基于阿里云实现前端上传图片到阿里云 需要通过后台接口获取阿里云上传凭证

### 阿里云上传图片插件说明 

说明：　基于阿里云实现前端上传图片到阿里云　需要通过后台接口获取阿里云上传凭证

####  Basic usage  基本使用

1.install SDK using npm  下载 

```
  npm install react-alioss
```

2.for example  引入

```
  import { UploadImage } from "react-alioss";  //组件引入
  import "react-alioss/dist/css/styles.css";   //样式引入

```

3. quick example

```
    import * as React from "react";
    import "./App.css";
    import logo from "./logo.svg";
    import { UploadImage } from "react-alioss";
    import "react-alioss/dist/css/styles.css";
    class App extends React.Component {
      public render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.tsx</code> and save to reload.
            </p>
            <UploadImage
              clientOss={"2"}
              keyOss={"3"}
              radio={"690/300"}
              limit={1}
              tips={() => {
                return <p> 690*300像素或690/300，支持png、jpg、gif格式，小于5M </p>;
              }}
              onChange={this.imageChange}
              cropper={true}
            />
          </div>
        );
      }
      protected imageChange = (e: any) => {
        return e;
      };
    }
    
    export default App;
```

#### Props  属性说明
 

| Prop       | Type                                                     | Dafault | Description                                                                   |
| ---------- | -------------------------------------------------------- | ------- | ----------------------------------------------------------------------------- |
| clientOss  | object                                                   | null    | 阿里云上传需要的凭证  (必需)                                                  |
| keyOss     | string                                                   | null    | 阿里云上传路径 (必需)                                                         |
| radio      | string                                                   | ''      | 显示图片上传比例 (可选)                                                       |
| limit      | number                                                   | ''      | 限制图片上传个数 默认不限制 (可选)                                            |
| tips       | function                                                 | -       | 提示文案 (可选)                                                               |
| onChange   | function(uploadMess: ［］　)                             | -       | 文件发生变化的回调，发生在用户选择文件时  (必需)                              |
| cropper    | boolean                                                  | false   | 是否裁剪图片 (可选)                                                           |
| disabled   | boolean                                                  | false   | 是否禁用 (可选)                                                               |
| uploadMess | Array<{  aliurl?: string　url: string 　fail?: string }> | [ ]     | {aliurl：‘阿里云返回的图片链接’，url：‘本地图片路径’，＇fail：上传状态＇} |