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.com
accessKeyId：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>)
    }
}

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