飞冰组件formbinder获取图片地址绑定

图片地址上传回显，需要表单提交，官方文档不推荐使用form表单，于是使用formbinder表单粘合剂。
图片地址上传这个问题困扰了我几天的时间，终于在领导帮助下，完成了这个过程。
首先导入依赖,引用方法：

npm install @icedesign/form-binder -S
引用方法
import FormBinder from '@icedesign/form-binder';

对于普通字段的绑定方式：

<FormBinder name="processoperator" required message="必填项">
                                    <Input
                                        name="processoperator"
                                        size="large"
                                        style={{ width: '100%' }}
                                    />
                                </FormBinder>

这里，之前我也认为这样也能将图片地址绑定上，但是我有多个步骤，且每个步骤下有三个基本图片。并且我的图片上传不是将图片直接存到数据库而是图片的地址。这里就需要后台创建图片地址并且将图片地址再次返回到前台一起存到数据库，这种情况下。需要get一个方法获得图片地址。

 getImg = (imgname, imgurl) => {
        console.log("-----------Edit product++++++getImg dataUrl:imgname:" + imgname + "; imgurl:" + imgurl);
        if(imgname=="cardaddr" ){

            this.setState({
                cardaddr:imgurl,
                formChange:true,
            });
        }

自定义组件获得编辑显示图片

 <CropUploadImage
                                        imgname = "imgaddr"
                                        btnvalue = {"图片"}
                                        imgaddr={this.state.value.imgaddr}
                                        getImg={this.getImg}
                                    />

具体实现看下一篇文章。
开始的时候，使用this.state.processData[currentStep].imgaddr并不能获取图片，这个问题困扰了很久时间，绕了很多弯路。最后，在总监查看官方文档解决了这个问题。
在formbinder组件里，有一个value表单值。通过初始的 value 进行设置图片的地址。所以无论如何也是取不到图片地址的。
在构造函数里初始化：

constructor(props) {
        super(props);
        this.state = {
            currentStep: 0,
            processingdata:[],
            formValue: {
                processname: '',
                processoperator: '',
                processdate: '',
            },
            formChange:false,
            value: {
                imgaddr: '',
                tableaddr:'',
                cardaddr:''
            },
        };
    }

因为这里我是多个步骤，且每个步骤下多个图片。每个步骤也就是一个对象。

 value={this.state.processingdata[currentStep]}

取到这个对象后，就能取到对象里面的各个值了。

imgaddr={this.state.value.imgaddr}
imgaddr={this.state.value.tableaddr}
imgaddr={this.state.value.cardaddr}

到此，图片的地址就能取到了，然后通过自定义的组件就能将图片显示，然后统一存到数据库中。

2018/12/20
guanglu