19_11_37__12_06_2018.jpg
情景展示：如上圖所示：我的新增客戶彈窗中引用了上傳組件<Upload>,當(dāng)再次打開modal彈窗的時(shí)候,上一次上傳的圖片的緩存還在，這個(gè)問(wèn)題問(wèn)了問(wèn)身邊的大佬刹缝，最后解決了称开，
最簡(jiǎn)單的解決辦法是：
給組件添加唯一的key值
//在這里給key添加, Math.random()的得出來(lái)的是隨機(jī)數(shù)
<div key={Math.random()}>
<Upload {...props} defaultFileList={this.state.fileList}>
<Button>
<Icon type="upload" onClick={this.upLoadImg}/> 上傳
</Button>
</Upload>
</div>
Math.random()的得出來(lái)的是隨機(jī)數(shù),這樣在每次打開彈窗的時(shí)候upload組件得到的key值都是唯一值
完整代碼如下：包括<Upload>組件的使用以及清除上一張上傳的緩存
import {Upload} from 'antd';
export default class Customer extends React.Component{
this.state={
organCertUrl:"",//用來(lái)存放圖片地址的對(duì)象
}
render(){
//------------------------------------定義上傳圖片的參數(shù)----------------------------------------
const $this=this
const props = {
ref:"upload",
action: '/safemgmt/api/custom/uploadOrganPic', //這塊是將后臺(tái)給你的接口地址需要復(fù)制到這一塊
listType: 'picture',
className: 'upload-list-inline',
onChange({ file, fileList }) {//file,和fileList是組件自帶的參數(shù)，根據(jù)你上面賦值過(guò)去的接口給你返回的內(nèi)容锰扶，file是個(gè)對(duì)象本谜，fileList是個(gè)數(shù)組初家，其實(shí)file對(duì)象就相當(dāng)于你用axios方法返回的response對(duì)象差不多啦~
if (file.status === 'done') {
$this.setState({
organCertUrl:file.response.result,//前面是我的存放地址的對(duì)象
})
}
}
}
}
}
return(
<div>
//..........中間的其他內(nèi)容省略，下面是上傳組件內(nèi)容
<div key={Math.random()}>
<Upload {...props} defaultFileList={this.state.fileList}>
<Button>
<Icon type="upload" onClick={this.upLoadImg}/> 上傳
</Button>
</Upload>
</div>
</div>
)
如果還有其他問(wèn)題乌助，歡迎留言~
PS:本人只是一枚廢柴小碼農(nóng)溜在，在實(shí)戰(zhàn)中積累經(jīng)驗(yàn)，只是將所踩過(guò)的坑分享出來(lái)給遇到同樣坑的小伙伴們提個(gè)醒他托，可能會(huì)少走些彎路掖肋。如果能幫助到你解決實(shí)際問(wèn)題，我將更加堅(jiān)定分享的初衷：一起成長(zhǎng)赏参。
目前只在知乎上和簡(jiǎn)書上更新文章志笼，準(zhǔn)備在這兩個(gè)地方持續(xù)更新文章，您的關(guān)注對(duì)我可能是莫大的鼓勵(lì)把篓。
知乎用戶名：廢柴碼農(nóng)
微博用戶名：有溫度的壁紙
哈哈纫溃，交個(gè)朋友啦~
