圖片地址上傳回顯烫映，需要表單提交沼本，官方文檔不推薦使用form表單，于是使用formbinder表單粘合劑锭沟。
圖片地址上傳這個(gè)問題困擾了我?guī)滋斓臅r(shí)間抽兆，終于在領(lǐng)導(dǎo)幫助下，完成了這個(gè)過程族淮。
首先導(dǎo)入依賴,引用方法：
npm install @icedesign/form-binder -S
引用方法
import FormBinder from '@icedesign/form-binder';
對(duì)于普通字段的綁定方式：
<FormBinder name="processoperator" required message="必填項(xiàng)">
<Input
name="processoperator"
size="large"
style={{ width: '100%' }}
/>
</FormBinder>
這里辫红，之前我也認(rèn)為這樣也能將圖片地址綁定上，但是我有多個(gè)步驟祝辣，且每個(gè)步驟下有三個(gè)基本圖片贴妻。并且我的圖片上傳不是將圖片直接存到數(shù)據(jù)庫(kù)而是圖片的地址。這里就需要后臺(tái)創(chuàng)建圖片地址并且將圖片地址再次返回到前臺(tái)一起存到數(shù)據(jù)庫(kù)蝙斜，這種情況下名惩。需要get一個(gè)方法獲得圖片地址。
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}
/>
具體實(shí)現(xiàn)看下一篇文章孕荠。
開始的時(shí)候绢片，使用this.state.processData[currentStep].imgaddr并不能獲取圖片，這個(gè)問題困擾了很久時(shí)間岛琼，繞了很多彎路底循。最后，在總監(jiān)查看官方文檔解決了這個(gè)問題槐瑞。
在formbinder組件里熙涤，有一個(gè)value表單值。通過初始的 value 進(jìn)行設(shè)置圖片的地址。所以無(wú)論如何也是取不到圖片地址的祠挫。
在構(gòu)造函數(shù)里初始化：
constructor(props) {
super(props);
this.state = {
currentStep: 0,
processingdata:[],
formValue: {
processname: '',
processoperator: '',
processdate: '',
},
formChange:false,
value: {
imgaddr: '',
tableaddr:'',
cardaddr:''
},
};
}
因?yàn)檫@里我是多個(gè)步驟那槽，且每個(gè)步驟下多個(gè)圖片。每個(gè)步驟也就是一個(gè)對(duì)象等舔。
value={this.state.processingdata[currentStep]}
取到這個(gè)對(duì)象后骚灸，就能取到對(duì)象里面的各個(gè)值了。
imgaddr={this.state.value.imgaddr}
imgaddr={this.state.value.tableaddr}
imgaddr={this.state.value.cardaddr}
到此慌植，圖片的地址就能取到了甚牲，然后通過自定義的組件就能將圖片顯示，然后統(tǒng)一存到數(shù)據(jù)庫(kù)中蝶柿。
2018/12/20
guanglu
