利用vue封装一个判断全部文件类型的js
时间: 2023-12-14 13:02:54 浏览: 31
可以使用 `mime` 库来判断文件类型。以下是一个利用 `mime` 库封装文件类型判断的示例代码:
1. 安装 `mime` 库
```
npm install mime
```
2. 创建 `fileType.js` 文件
```
import mime from 'mime';
export function getFileType(file) {
const mimeType = mime.getType(file.name);
return mimeType.split('/')[0];
}
```
3. 在 Vue 组件中使用
```
<template>
<div>
<input type="file" @change="handleFileChange">
</div>
</template>
<script>
import { getFileType } from '@/utils/fileType.js';
export default {
methods: {
handleFileChange(e) {
const file = e.target.files[0];
const fileType = getFileType(file);
console.log(fileType);
}
}
}
</script>
```
以上代码中,`getFileType` 方法接收一个文件对象,使用 `mime` 库获取文件的 MIME 类型,然后通过分割 `/` 字符串获取文件类型。在 Vue 组件中,`handleFileChange` 方法会在文件选择后被触发,调用 `getFileType` 方法获取文件类型,并将文件类型打印到控制台。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)