使用antd-vue上传组件<a-upload>踩坑记录
使用<a-upload>的时候,发现在上传成功后change事件之回调了一次,而且file.status一直是uploading
<a-upload name="file" :file-list="fileList" @preview="previewHeadImg"
list-type="picture-card" class="avatar-uploader" :action="uploadAction"
:before-upload="beforeUpload"
@change="uploadChange"
:headers="headers"
@remove="removeHeadImg">
<div v-if="fileList.length < 1">
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
上传
</div>
</div>
</a-upload>
后来在这里 https://github.com/ant-design/ant-design/issues/2423找到了原因:大概意思是<a-upload>是受控模式的组件,需要自行维护其状态。
解决方案:
uploadChange({file,fileList}){
this.fileList = fileList;
...
}
只需在change的回调方法中重新设置fileList即可