Vue开发实战十四：图片转base64上传及修改的实现

最新推荐文章于 2024-07-29 14:17:59 发布
最新推荐文章于 2024-07-29 14:17:59 发布
阅读量887 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 图片转base64
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16497617/article/details/122873563
版权
本文介绍了使用Vue.js实现图片上传和修改功能，通过on-change事件处理图片大小和类型，并将其转换为base64。内容包括最终效果展示、布局设计、on-change事件的实现以及必填项的校验。重点在于on-change事件中对图片的处理和表单字段的清空操作，以允许用户修改上传的图片。
摘要由CSDN通过智能技术生成

文章目录


说明：实际项目中需要我们将图片转为base64作为一个字段保存，下面我们来探究下如何实现一个图片base64的上传及修改

1.最终效果

图片上传
image

图片修改
image

2.布局

<el-form-item label="图标" prop="icon"><
了解本专栏 订阅专栏 解锁全文 超级会员免费看
博主逸尘
关注
专栏目录
订阅专栏
vue 图扑 开发_【前端vue进阶实战】：从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 （一）...
weixin_35758982的博客
12-24 833
本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库，打造一个属于自己的在线绘图软件，最终效果：http://topology.le5le.com 。如果你觉得好，欢迎给文章和开源库点赞，让我们更有动力去做好！本系列教程源码地址：Github一、创建项目框架1. 使用Nuxt.js向导创建项目yarn create nuxt-app topology...
vue 图片上传base64
Gomeer的博客
04-22 1200
未添加图片时样式图如下 添加图片后，多了编辑和查看的按钮 html代码中分两个部分：无图片（如图1）/原本存在图片（图2）。根据绑定的firImg判断是否有图片 <el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg...
Vue发送图片(base64)
m0_52633792的博客
02-08 675
点击图片按钮,选择本地图片进行发送。
将图片转换为 Base64 编码（Vue实现）
最新发布
l10103的博客
07-29 1602
Base64 是一种编码格式，它将二进制数据转换为一种基于64个可打印字符的表示形式。这种编码方式允许二进制数据在文本形式中安全地传输和存储，这对于网页设计和网络传输尤其重要。
vue项目中如何利用base64上传图片与文件
xinzi11243094的博客
03-31 1732
前端在进行资源文件上传的时候，可以借助HTML5中，fileReader对象进行图片和文件的上传。利用该对象提供的一些属性方法更加方便的获取所上传的文件信息。在vue项目中操作方法如下： 1）绑定input[type=‘file’]的change事件 <input @change="uploadPhoto($event)" type="file" class="kyc-passin...
vue上传图片的base64实现
u014069424的专栏
05-14 972
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-sca.
Vue中base64 转图片上传
卜卦的博客
08-24 2192
// 拍照获取图片base64 // imgsrc: base64图片资源 refreshDataList (imgsrc) { let data = this.baseImg(imgsrc) console.log(data) }, // base64转图片资源 baseImg (dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1]
Vue进阶（五十四）：vue-cli 脚手架 dev-server
2401_84447417的博客
04-29 556
/ 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static。// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述。// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源。// 下面结果就是 ‘http://localhost:8080’// 下面是es6的promise规范，用来处理嵌套请求的。_resolve() // 这里没有传递数据，只是在模拟。
vue项目实战精粹汇总
趣谈前端
02-09 3375
前言vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件（electronjs）等也有广泛...
Ant Design Vue结合vue-cropper打造图片裁剪上传组件
sgegv的博客
05-04 750
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Drawing.vue 手写签名，base64 转文件， 并上传图片
09-09
手把手教你使用canvas 手写签名，并上传图片，cancas 中自动是生成文字， 签名中需要用的到技术基本包含， 尽量不让你懂脑子，拿过来就用，（上传图片接口需要修改）上传图片转base64 base64转文件， 上传图片使用formData ，就问你怕不怕
vue.js图片转Base64上传图片并预览的实现方法
10-18
主要介绍了vue.js图片转Base64上传图片并预览的实现方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端图片转base64
04-07
通过绑定按钮来触发图片选择,获得图片的base64编码,类型,名称 可用于图片异步上传,或者在线预览,基于WebUploader
vuebase64fileupload利用Vuejs将上传文件作为base64datauris
08-10
vue-base64-file-upload - 利用Vue.js将上传文件作为base64 data-uris
前端vue图片上传并转base64
weixin_56475385的博客
02-22 961
可以作为一个公共方法,看自己需求，需要传入一个上传成功的图片ile文件 const imgupload = (file, callback) => { //压缩图片需要的一些元素和对象 const reader = new FileReader() reader.readAsDataURL(file) //文件base64化，以便获知图片原始尺寸 reader.onload = function (e) { typeof callback === 'functio..
vue上传图片，并获取该图片的base64
qq_42048638的博客
10-27 991
<div> <el-button type="primary" size="mini" @click="reupload" > <i class="el-icon-upload el-icon--right"> 上传文件 </i> </el-button> </div> // 上传文件 reupload() { const input = document.createElement('
vue 图片上传转base64
a2844945185的博客
11-09 773
<template> <div> <el-upload accept=".jpg,.jpeg,.png,.JPG,.JPEG" action="/index.php/index/upload/uploadimg" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :.
vue项目上传base64位图片； 及预览效果
weixin_50307964的博客
11-30 571
第一步:html部分 <input type="file" style="display: none;" name="img" ref="inputFile" id="" @change="changeFile"> <div> <button @click="clickFile">上传图片</button> </div> <div> <img :src="item
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博主逸尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值