ElementUI上传头像先预览本地文件，最后提交上传

最新推荐文章于 2022-11-01 10:52:16 发布
最新推荐文章于 2022-11-01 10:52:16 发布
阅读量545 收藏 1
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TingLogin/article/details/113409416
版权
a.先利用组件中on-change来实现本地预览
:on-change="imgSaveToUrl"
–| 参数和事件如下

定义imgsrc变量用于存放本地变量
相关事件截图

- b.利用组件中on-success来实现路径赋值
–| 事件如下

事件截图

- c.最后提交上传之后的base64
–| 事件如下

事件截图

苏宛墨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+element ui 表单验证头像上传预览
weixin_38891273的博客
10-26 551
<el-form-item label="上传照片：" prop="photo" style="position: absolute; left: 440px; top: 0px;width:250px;"> <el-upload class="avatar-uploader" action="#" :ht..
上传头像或单张图片并预览
西风XF的博客
06-26 2573
实现效果：上传头像或者上传单张图片并预览； 知识点： input标签里面的 accept属性  是限制选择文件的格式； FileReader是HTML5的本地预览图片接口 onloadstart函数  数据开始读取时触发 onload函数  数据读取成功完成时触发 onloadend 数据读取完成时触发，无论成功失败 代码： #oDiv{
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
Element-UI与Iview中的多个图片预览并通过点击事件上传
虾米博客
09-19 7703
要完成通过点击事件统一上传图片，并后台要求图片以数组格式传给后台，但是Element-UI与Iview的文档中只有直接上传并且是单个图片上传的例子，所以在这里自己做个笔记，以防止以后会用到：下面是已经做完的实例 下面是用的iview写的，用element-ui也可以完成； 图片预览的时候，是可以点击查看图片并删除的，所以这里有2个事件（点击预览和删除），另外上图中的uploadList...
使用elementUI实现将图片上传到本地的示例
10-18
在这个例子中，`el-upload` 组件用于选择和上传文件，`action` 属性定义了上传的 URL，`on-preview` 和 `on-remove` 分别是预览和移除文件的事件处理函数，`file-list` 用来存储已上传文件的信息，`auto-upload` ...
单文件HTML本地引入elementUI
04-18
在“单文件HTML本地引入ElementUI”的场景下，我们需要在不使用构建工具（如Webpack或Rollup）的情况下，仅通过一个HTML文件来加载并使用ElementUI的所有资源。这种做法适用于小型项目或者快速原型开发，它简化了...
vue+elementui上传附件到七牛，文件下载
04-16
vue+elementui上传附件到七牛，后台返回附件资源，实现文件下载； :in-files-list="fileList.length?fileList:[]" :x-type="doc.OKASDAILY" :x-target="company" :accepts="accepts" :company="company" @...
IE9 elementUI文件上传的问题解决
10-17
主要介绍了IE9 elementUI文件上传的问题解决，有需要了解IE9 elementUI文件上传的朋友可参考。希望此文章对各位有所帮助
vue+elementUI实现表单和图片上传及验证功能示例
10-17
主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
vue2 + elementui el-upload文件上传后回显及重新提交思路
陈景夏
07-14 4529
vue2 + elementui el-upload文件上传后回显及重新提交思路
Element-ui中el-upload上传图片并有预览功能
qq_45829293的博客
02-11 1万+
适用端 uniapp和vue的PC端使用 功能介绍： 上传图片之前显示一个边框的样式 上传图片进行预览 点击确认上传（接口对接） 效果展示： 上传之前 上传预览（点击确定之前，未对接接口时） 具体实现： HTML <el-upload action="/source/upload" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG" :show-file-list="false" :on-change="handleLicensePreview" :bef
【element-UI】el-upload本地上传图片，点击表单提交和一起上传，使用formdata对象上传
wasinlu的博客
11-01 7905
【代码】【element-UI】el-upload本地上传图片，点击表单提交和一起上传，使用formdata对象上传。
element上传文件 先上传本地
weixin_44286765的博客
06-14 1227
<el-upload :action="‘地址’" :headers="{token:token}" :on-success="handleGetFile" :file-list="fileList"> <el-button type="primary" icon="el-icon-upload" style="">上传文件</el-button> //文件上传后的回调函数 handleGetFile(response, file
elementui 图片上传，手动实现图片上传，入库并实现预览效果（轮播展示）
一株木樨的博客
03-25 1万+
需求： 点击操作按钮，选择上传，弹出上传dialog，使用upload组件实现图片上传,并可在前端进行预览 先看上传 前端实现： 弹出框： <el-dialog :title="titleFlag" :visible.sync="uploadFlag" width="30%" :close-on-click-modal="false" class="uploadFlag" @close="()=>{this.fi
Vue中通过el-upload组件实现上传前预览本地图片
热门推荐
只如初见0706的博客
11-19 1万+
1、实现效果如下图所示 用户选择本地待上传的图片，选择成功后，上传组件隐藏，呈现本地预览组件，单击图片并实现图片的放大呈现 2、template（相当于html）部分的代码如下 代码实现逻辑： 在el-upload组件中，将auto-upload设置为false不会执行自动上传，给予on-change一个触发事件imgSaveToUrl，在imgSaveToUrl方法中用于生成可用于本...
elementUI怎么用上传头像组件upload
jo_an_na的博客
09-30 1万+
&lt;el-upload class="avatar-uploader" action="123" :http-request="upLoad" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAv
超级简单教你Element UI上传功能（以及上传坑点）
LangZi_Azhao的博客
02-25 1万+
本作为傻瓜式教程，如果有建议欢迎评论
elementui上传图片文件预览
最新发布
08-25
要实现ElementUI上传图片文件预览，可以使用el-upload组件的on-preview属性来实现。具体的实现思路如下： 1. 在el-upload组件中，设置on-preview属性为一个方法名，例如previewFile。 2. 在methods中定义previewFile方法，该方法接收一个参数file，代表待预览的文件。 3. 在previewFile方法中，判断文件的类型。如果是图片文件（如png、jpg、jpeg），则可以直接使用window.open方法打开文件的URL进行预览。 4. 如果文件类型不是图片文件，可以给出相应的提示信息，告知该文件类型暂不支持预览。 以下是代码示例，演示了如何使用ElementUI的el-upload和on-preview属性实现图片文件的预览功能： ```html <template> <el-upload action="/upload" list-type="picture-card" :on-preview="previewFile" > <i class="el-icon-plus"></i> </el-upload> </template> <script> export default { methods: { previewFile(file) { const fileType = file.name.split('.').pop().toLowerCase(); if (['png', 'jpg', 'jpeg'].includes(fileType)) { window.open(file.url); } else { this.$message({ message: '该文件类型暂不支持预览', type: 'warning', }); } }, }, }; </script> ``` 通过以上代码，当用户点击上传的图片文件时，将会通过window.open方法在新窗口中打开图片文件进行预览。如果上传的文件类型不是图片文件，则会显示一个警告提示，告知该文件类型暂不支持预览。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [SpringBoot ElementUI 文件上传和预览](https://blog.csdn.net/zhouzhiwengang/article/details/108289673)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue+ElementUI使用vue-pdf实现预览功能](https://download.csdn.net/download/weixin_38626242/12931474)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue实战--vue+elementUI实现多文件上传+预览（word/PDF/图片/docx/doc/xlxs/txt）](https://blog.csdn.net/qq_46617584/article/details/127796486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值