网站首页 > 技术文章 正文
这是一个图片上传的功能需求,当用户选择本地待上传的图片后隐藏上传组件并本地预览图片略缩图。这是个非常简单的功能且是前端使用频率很高的功能,ElementUI为了方便用户封装了一套文件上传的组件el-upload。可以帮助用户简单、快捷的实现文件上传功能,同时还提供了丰富的属性来实现对文件的各种操作。
HTML构建
这里我们利用ElementUI提供的组件el-upload来实现图片上传的功能,ElementUI封装了很多属性可以帮助我们快速的实现文件的上传,监听、校验和设限。这里我们不用el-upload的自动上传功能,所以我们利用属性:auto-upload="false"来禁止文件自动上传。属性on-change可以监听文件添加、上传时的状态改变,利用该属性触发自定义事件可以获取到需要的文件属性。
CSS样式设计
图片上传的样式根据设计需求来就可以了,我这里利用flex定义简单的样式。图片预览我们直接借用el-upload标签属性,设置其背景图片为我们上传的图片即可。
获取图片URL地址
on-change属性在文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,利用on-change属性绑定自定义触发事件来生成可用于本地预览的URL地址。e.raw为图片的实体对象,利用window.createObjectURL(e.raw)来创建图片地址。
阻止自动上传并获取图片
在el-upload中定义属性:auto-upload="false" 可以禁止文件自动上传,上传禁用之后无法通过上传之后的效果显示。此时before-upload、on-progress、on-success、on-error、on-preview、on-remove等钩子函数就无法获取到文件信息了,所以想获取到文件的还需要通过on-change属性来实现。既然禁止了自动上传那么我们就需要拿到文件对象,我们需要在data中创建一个 FormData 对象来接收文件数据(有文件的form表单上传数据要用formData类型)。
手动上传图片
获取到文件数据之后我们就可以开始手动上传文件,如果还需要附上表单数据我们可以通过append继续向formData中添加数据。formData可以将form表单元素的name与value进行组合,实现表单数据的序列化从而减少表单元素的拼接,提高工作效率。
总结:
在form表单中如果要上传文件,一定要将headers参数 Content-Type=”multipart/form-data”设置封装数据类型。把数据分成一个一个小段,再利用ajax的send()方法将数据发送至后台。以上内容是小编给大家分享的【Vue实战082:el-upload组件实现图片上传及预览】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:将headers设置成'Content-Type':'multipart/form-data'类型。
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 600℃几个Oracle空值处理函数 oracle处理null值的函数
- 592℃Oracle分析函数之Lag和Lead()使用
- 580℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 576℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 572℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 565℃【数据统计分析】详解Oracle分组函数之CUBE
- 551℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 546℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)