背景
最近做勇泰商城項(xiàng)目空幻，用了之前沒(méi)用過(guò)的react和ant-design幌墓，其余部分大同小異贬循，結(jié)果要在表單里上傳圖片缺犯了難句柠，網(wǎng)上找了一圈也沒(méi)有找到靠譜的解決方案浦译，遂在這里記錄一番
動(dòng)手
樣式
先來(lái)一個(gè)form組件，然后再form的item里加入upload組件
<Form onFinish={onFinish} form={form}>
<Form.Item
label="商品圖片"
name="img"
valuePropName="img"
getValueFromEvent={normFile}
>
<Upload
name="file"
listType="picture-card"
className="avatar-uploader"
action="https://upload.qiniup.com"
showUploadList={false}
data={getToken}
onChange={handleChange}
>
{form.getFieldValue("img") ? (
<img className="img" src={baseURL + form.getFieldValue("img")} alt="" />
) : (
<div>
<div style={{ marginTop: 8 }}>Upload</div>
</div>
)}
</Upload>
</Form.Item>
<Form.Item>
<Space size="middle">
<Button type="primary" htmlType="submit">
提交
</Button>
<Button
onClick={() => {
form.resetFields();
setVisible(false);
}}
>
取消
</Button>
</Space>
</Form.Item>
</Form>
使用form組件的關(guān)聯(lián)屬性form溯职，組件渲染時(shí)使用form.getFieldValue("img")檢測(cè)form中是否有相關(guān)的值,此時(shí)存儲(chǔ)的值并不是像往常那樣的圖片本地地址精盅，而是上傳后的圖片hash值，若有值缸榄，就拼接baserUrl展示圖片
<img className="img" src={baseURL + form.getFieldValue("img")} alt="" />
如果沒(méi)有值的話就顯示上傳按鈕
<div>
<div style={{ marginTop: 8 }}>Upload</div>
</div>
圖片上傳完后如何將值回填到form表單中
這就需要用到Form.Item的屬性getValueFromEvent,官方文檔給的描述是“設(shè)置如何將 event 的值轉(zhuǎn)換成字段值”渤弛，說(shuō)實(shí)話，看了好幾遍甚带，沒(méi)明白她肯，還好找到了一段示例代碼，最后勉強(qiáng)明白鹰贵，應(yīng)該是會(huì)捕捉內(nèi)部元素觸發(fā)的回調(diào)晴氨，內(nèi)部的upload組件文件狀態(tài)改變時(shí)會(huì)有一個(gè)回調(diào)，參見(jiàn)onChange碉输。Form.Item捕捉到這個(gè)回調(diào)籽前，我們就可以在里面搞些事情拿到上傳后的hash值了，如代碼中的getValueFromEvent={normFile}
const normFile = (info) => {
if (info.file.status == "done") {
return info.file.response.key;
}
};
上述代碼種增加了一步info.file.status=="done"的判斷敷钾，因?yàn)槟玫降氖录俏募顟B(tài)改變的回調(diào)枝哄，所以只有最后上傳完成的一次回調(diào)中會(huì)帶有返回的hash值。
修改數(shù)據(jù)如何將hash值又轉(zhuǎn)換成圖片顯示出來(lái)
做CURD的都知道阻荒，一個(gè)表單一般創(chuàng)建和更新共用挠锥，剛才解決了創(chuàng)建的問(wèn)題。其實(shí)更新的問(wèn)題在上文中已經(jīng)說(shuō)過(guò)了侨赡，其實(shí)就是使用form.getFieldValue("img")蓖租，很簡(jiǎn)單，問(wèn)題迎刃而解羊壹。
總結(jié)
之所以遇到這個(gè)問(wèn)題其實(shí)是對(duì)新技術(shù)的不熟悉蓖宦，等熟悉了之后也覺(jué)得這個(gè)問(wèn)題沒(méi)什么了。程序開(kāi)發(fā)人員寫(xiě)的文檔往往如此油猫，自己心理跟明鏡似的稠茂，所以文檔寫(xiě)的非常簡(jiǎn)單，但不熟悉的人來(lái)看文檔的話情妖，就非常吃力了主慰，要銘記此事嚣州，常自省也。
