圖片地址上傳回顯，需要表單提交，官方文檔不推薦使用form表單，于是使用formbinder表單粘合劑。
圖片地址上傳這個問題困擾了我?guī)滋斓臅r間，終于在領(lǐng)導幫助下，完成了這個過程。
首先導入依賴,引用方法：

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>

這里，之前我也認為這樣也能將圖片地址綁定上，但是我有多個步驟，且每個步驟下有三個基本圖片。并且我的圖片上傳不是將圖片直接存到數(shù)據(jù)庫而是圖片的地址。這里就需要后臺創(chuàng)建圖片地址并且將圖片地址再次返回到前臺一起存到數(shù)據(jù)庫，這種情況下。需要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}
                                    />

具體實現(xiàn)看下一篇文章。
開始的時候，使用this.state.processData[currentStep].imgaddr并不能獲取圖片，這個問題困擾了很久時間，繞了很多彎路。最后，在總監(jiān)查看官方文檔解決了這個問題。
在formbinder組件里，有一個value表單值。通過初始的 value 進行設(shè)置圖片的地址。所以無論如何也是取不到圖片地址的。
在構(gòu)造函數(shù)里初始化：

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}

到此，圖片的地址就能取到了，然后通過自定義的組件就能將圖片顯示，然后統(tǒng)一存到數(shù)據(jù)庫中。

2018/12/20
guanglu