有时上传后,因缓存问题,不会显示上传后的文件列表
解决:
html代码:
我当前所用的UI框架是ant design vue
给上传组件添加一个fileKey的变量
//封装的上传组件
<a-row :key="fileKey">
<a-upload
list-type="picture-card"
accept="image/*,.pdf"
:multiple="true"
:file-List="fileList"
:before-upload="beforeUpload"
@preview="handlePreview"
:remove="handleRemove"
>
<div v-if="fileList.length < 5">
<a-icon type="plus" />
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</a-row>
js代码:
回显文件列表方法中
async handleUpload(){
//赋值随机数
this.fileKey = Math.random();
},
使每次封装组件中都有不同的数据,则可使组件清除缓存