antd-vue上传组件踩坑记录

使用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即可