vant组件库 Uploader 文件上传回显显示文件名称

最新推荐文章于 2025-02-10 16:30:37 发布

71ang~

最新推荐文章于 2025-02-10 16:30:37 发布

阅读量5.5k

点赞数 9

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/hollowmam/article/details/114086632

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

引入

import Vue from 'vue';
import { Calendar } from 'vant';

Vue.use(Calendar);

组件

<van-uploader v-model="fileList">
  <template #preview-cover="{ file }">
    <div class="preview-cover van-ellipsis">{{ file.name }}</div>
  </template>
</van-uploader>

CSS

<style>
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>

数据格式（回显时格式处理成这样）

export default {
  data() {
    return {
      fileList: [
      	{
	      	url: 'https://img01.yzcdn.cn/vant/tree.jpg',
	      	file : new File([], '文件名称', {})
      	},
      	...
      ]
    };
  }
};