React使用antd的upload组件上传图片到阿里云，服务端签名

在React框架中使用antd组件里面upload组件上传图片到阿里云。
antd有官方文档，但是有点复杂了，实际上用不了那么多的方法，我简化了一下。

我使用服务端签名，前台传。
首先是后台代码

  public static Map<String,String> getSignatureAndPolicy(){        Map<String, String> returnMap = new HashMap<>();        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);        long expireTime = 3600;//过期时间加一天        long expireEndTime = System.currentTimeMillis() + expireTime * 1000*24;        Date expiration = new Date(expireEndTime);        PolicyConditions policyConds = new PolicyConditions();        policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);        String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);        byte[] binaryData = new byte[0];        try {            binaryData = postPolicy.getBytes("utf-8");        } catch (UnsupportedEncodingException e) {            e.printStackTrace();        }        String encodedPolicy = BinaryUtil.toBase64String(binaryData);        String postSignature = ossClient.calculatePostSignature(postPolicy);        returnMap.put("signature",postSignature);        returnMap.put("policy",encodedPolicy);        return returnMap;    }

获取到了policy和signature，接下来是前台代码

const GLOBAL_VAR={ossUploadUrl：bucketname+endpoint ，//例如 http://bucketname.oss-cn-chengdu.aliyuncs.comaccessKeyId：accessKeyId，//你的阿里云accessKeyId}class UploadImgForm extends React.Component{    constructor(props){        super(props)        this.state = {            fileList:[],            ossData:new Object()        }    }    componentDidMount() {        this.getSignatureAndPolicy()    }    getSignatureAndPolicy=()=>{//这是向后端发送请求，获取policy和signature        Ajax.post("bizActivity/getSignatureAndPolicy",{},{},(xhr,data)=>{            let ossData = this.state            ossData.policy = data.data.policy            ossData.signature = data.data.signature            ossData.expire = new Date().getTime()            ossData.host = GLOBAL_VAR.ossUploadUrl            ossData.accessId = GLOBAL_VAR.accessKeyId            this.setState({ossData})        })    }    getExtraData = file => {        const { ossData } = this.state;        return {            key:file.name,            OSSAccessKeyId: ossData.accessId,            policy: ossData.policy,            Signature: ossData.signature,            success_action_status:200        };    }    render(){        const { getFieldDecorator, getFieldValue } = this.props.form;        const { stepList, activityId } = this.props        const formItemLayout = {            labelCol: { span: 5 },            wrapperCol: { span: 16 }        };//注意这里的name的值不要是multiplefile，会请求失败        const props = {            name: 'file',            action:GLOBAL_VAR.ossUploadUrl,            multiple:true,            showUploadList:{                showPreviewIcon: false, showRemoveIcon: false, showDownloadIcon: false            },            listType:"picture",            data: this.getExtraData,            fileList:this.state.fileList,            onChange: ({ fileList,file }) => {                this.setState({ fileList:fileList })            },        }        return (<Form>            <Form.Item {...formItemLayout} label="上传图片">                <Upload {...props} >                    <Button >上传图片</Button>                </Upload>            </Form.Item>        </Form>)    }}

就是这样简单啦，有问题的可以评论大家探讨下哦。