react-alioss

阿里云上传图片插件说明

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

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";   //样式引入

1. 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：上传状态＇}