Vue - 获取 UI 组件库 <upload> 上传组件返回的 File 对象文件扩展名,拿到 Ant Design Vue / Element UI 等组件库的上传组件返回 File 文件的后缀名
2023-09-11 14:15:54 时间
前言
在 Vue.js 组件库中,像 Element UI / Ant Design Vue 的 <upload> 上传组件,一般都会返回一个 File 对象供咱们使用。
本文实现了 vue.js 前端组件库,获取文件上传组件 Upload 返回 File 文件对象的文件扩展名(后缀名),
你可以直接复制本文提供的方法,非常轻松拿到 File 对象中的文件扩展名(也就是您上传的文件格式),
如下图所示,当上传一个文件时,就能拿到其文件的扩展名,
此方案不止适用于 Vue,像 Nuxt.js / React 都行,只要有 File 对象就能取出来。
示例代码干净整洁,无任何乱七八糟的代码
示例源码
推荐使用一键复制功能,避免漏选。
随便找个新页面,运行起来即可查看。
相关文章
- vue项目 ie提示:视频类型不受支持或文件路径无效;解决方案
- vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 在纯 JS 文件中调用自定义组件 / 类似 ElementUI 弹框组件 Message、Modal(在纯 js 文件中通过 import 方式引入并调用弹框模态框组件显示出来,)
- uni-app - 将 base64 图片编码转为 Blob 本地文件路径(把base64类型的图片,转换成blob二进制文件流)适用于 uni-app / vue.js / JavaScript
- Vue核心知识
- vue-element-admin el-upload组件实现图片上传
- 最新版教学Vue.js渐进式JavaScript框架
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- vue-cli2.0权限控制
- Vue--路由带参跳转--/login?id=10--接收this.$route.query.id
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- vue-router有哪几种导航钩子?(具体怎么用的)
- Vue页面加载时,触发相关函数,使用了mounted/methods
- vue使用vue-resource,进行网络请求
- vue-cli4 配置gzip文件处理、nginx配置解决vue单页面打包文件大首次加载慢的问题
- Vue上传文件:ElementUI中的upload实现
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- vue:VSCode添加自定义vue文件初始化模板