【vue && 上传组件】清除上传组件缓存,使之每次显示新的文件列表

有时上传后,因缓存问题,不会显示上传后的文件列表

解决:

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();     
},

使每次封装组件中都有不同的数据,则可使组件清除缓存

猜你喜欢

转载自blog.csdn.net/THcoding_Cat/article/details/115215000