如何使用Vue.js根据url检查文件是音频还是视频文件

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/check-file/:url',
    name: 'CheckFile',
    component: CheckFile
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// CheckFile.vue
<template>
  <div>
    <h1>Check File</h1>
    <p>URL: {{ url }}</p>
    <p>File Type: {{ fileType }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      fileType: ''
    }
  },
  mounted() {
    this.url = this.$route.params.url
    this.checkFileType()
  },
  methods: {
    checkFileType() {
      // 从URL中获取文件扩展名
      const fileExtension = this.url.split('.').pop().toLowerCase()

      // 根据文件扩展名判断文件类型
      if (['mp3', 'wav', 'ogg'].includes(fileExtension)) {
        this.fileType = '音频文件'
      } else if (['mp4', 'mov', 'avi'].includes(fileExtension)) {
        this.fileType = '视频文件'
      } else {
        this.fileType = '未知文件类型'
      }
    }
  }
}
</script>

<!-- App.vue -->
<template>
  <div>
    <router-link :to="'/check-file/' + url">检查文件</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com/example.mp4'
    }
  }
}
</script>