Vant 组件库 Uploader 组件预览时显示原文件名字

Question

微信小程序开发中使用到 Vant 组件库的 Uploader 组件，请问如何设置如图案例啊？

就是在选择图片后能够展示图片的真实原文件名字，我看返回的临时文件名都是一长串的字符串名字！

Answer 1

🕒上午好，题主！目前：🟢[在线]
📢参考GPT-4o mini 模型、由清水白石008整理提供！
📣今日金句：“生活中最重要的不是你所处的位置，而是你所朝的方向。” — 奥利弗·温德尔·霍姆斯

在使用 Vant 组件库的 Uploader 组件时，如果你想在选择图片后展示图片的真实原文件名，可以通过 afterRead 回调函数来获取文件信息，并将文件名存储在组件的状态中。然后，你可以在预览时显示这个文件名。

以下是一个示例代码，展示如何实现这个功能：

示例代码

<template>
  <div>
    <van-uploader
      :file-list="fileList"
      :after-read="afterRead"
      :max-count="5"
      :show-upload="true"
      :preview-image="true"
    />
    <div v-for="(file, index) in fileList" :key="index">
      <p>文件名: {{ file.name }}</p>
      <img :src="file.url" alt="预览" style="width: 100px; height: 100px;" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    afterRead(file) {
      // 将文件信息添加到 fileList 中
      this.fileList.push({
        name: file.name, // 获取原文件名
        url: file.url,   // 获取文件的临时 URL
      });
    },
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>

代码说明

1. van-uploader 组件：

   • :file-list="fileList"：绑定文件列表。
   • :after-read="afterRead"：设置文件读取后的回调函数。
   • :max-count="5"：设置最大上传文件数量。
   • :show-upload="true"：显示上传按钮。
   • :preview-image="true"：允许预览图片。

2. afterRead 方法：

   • 当用户选择文件后，afterRead 方法会被调用。
   • 在这个方法中，我们将文件的原始名称（file.name）和临时 URL（file.url）添加到 fileList 中。

3. 文件名和预览：

   • 使用 v-for 循环遍历 fileList，展示每个文件的原始名称和预览图像。

注意事项

• 确保你已经正确安装并引入了 Vant 组件库。
• 这个示例假设你使用的是 Vue.js 和 Vant 组件库的标准用法。
• 如果你需要处理更多的文件信息，可以根据 file 对象的其他属性进行扩展。

通过这种方式，你就可以在选择图片后展示图片的真实原文件名了。希望这能帮助到你！如果有其他问题，请随时问我。