vue如何截取文件名后缀

在Vue.js中，你可以使用`File`对象的方法来获取文件名和后缀名。当你处理用户上传的文件时，通常会通过`input[type="file"]`元素的`files`属性拿到文件数组。下面是一个简单的示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" multiple />
    <p>选择的文件：{{ selectedFiles }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: [],
    };
  },
  methods: {
    handleFileChange(e) {
      const files = e.target.files;
      this.selectedFiles = files.map((file) => {
        const fileName = file.name; // 文件名
        const [name, ...extension] = fileName.split('.'); // 截取文件名和后缀名
        return { name, extension: extension.join('.') }; // 返回包含文件名和后缀名的对象
      });
    },
  },
};
</script>

在这个例子中，`handleFileChange`方法接收`e.target.files`，然后遍历每个文件，使用`split('.')`方法分割文件名，得到文件名和后缀名数组，最后再组合成一个新的对象。