-
2021-01-12 16:58:35
1.首先在main.js中写一个函数并将函数挂载在全局变量中
// 图片转base64格式 挂载在全局 Vue.prototype.$base64Img = (e) => { return new Promise(function (resolve, reject) { // 使用Promise进行异步处理 let fileSize = 0 const fileMaxSize = 1024 // 设置图片最大为 1M fileSize = e.target.files[0].size // 获取图片大小 const size = fileSize / 1024 const file = e.target.files[0] // 获取图片文件对象 const reader = new FileReader() // 实例化一个对象 if (size > fileMaxSize) { e.target.value = '' // 内容清空 resolve({ err: '图片大小必须小于1M' }) } else if (size <= 0) { e.target.value = '' // 内容清空 resolve({ err: '图片大小大小不能为0M' }) } else { reader.readAsDataURL(file) // 把图片文件对象转换base64 reader.onload = function (e) { resolve(e.target.result) // 回到函数返回base64值 } } }) }
2. 在组件中的代码是
<template> <div class="register"> <!-- PC端点击打开文件选择图片 --> <label for="img"> <input type="button" id="btn" value="请上传识别图像" > <span id="text"></span> <input type="file" name="img" id="img" @change="handleFile"><br /><br /> </label> </div> </template> <script> export default { methods: { handleFile (e) { var filePath = document.querySelector('#img').value var arr = filePath.split('\\') document.querySelector('#text').innerHTML = arr[arr.length - 1] this.$base64Img(e).then((res) => { // 调用全局方法 console.log(res) // 控制台打印出图片base64值 }) } }, mounted () { } } </script> <style lang="scss" scoped> .register{ height: 100%; width: 100%; background: url('http://ahnu.co.cnki.net/Themes/default/images/loginBg.jpg') no-repeat; background-size: 105% 100%; padding-top: 200px; } .imagefile{ width: 100%; } label{ position: relative; } #img{ position: absolute; left: 0; top: 0; opacity: 0; } #btn{ margin-right: 5px; padding: 5px 10px; background: #00b0f0; color: #FFF; border: none; border-radius: 5px; } #text{ color: black; } </style>
3.当你点击文件上传后,就可以实现本地图片转base64格式
更多相关内容 -
vue.js图片转Base64上传图片并预览的实现方法
2020-12-11 07:12:01对于前端人员来说,图片处理...针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直接获取到base64数据直接写入img src 标签即可 下面使用element ui upload -
Vue项目pdf(base64)转图片遇到的问题及解决方法
2020-10-17 20:21:55主要介绍了Vue项目pdf(base64)转图片遇到的问题及解决方法,需要的朋友可以参考下 -
vue项目base64字符串转图片的实现代码
2020-10-18 09:22:14主要介绍了vue项目base64字符串转图片的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue 图片转base64格式方法总结
2022-02-11 15:13:12直入主题,上代码(其实用的还是FileReader) 主要方法 handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw);... console.log("file 转 base64结直入主题,上代码(其实用的还是FileReader)
主要方法handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw); // 一定要传入file格式 reader.onload = () => { console.log("file 转 base64结果:" + reader.result); }; reader.onerror = function(error) { console.log("Error: ", error); }; },
vue组件
<!-- --> <template> <div> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleRemove" multiple :limit="3" > <el-button size="small" type="primary">点击上传</el-button> </el-upload> </div> </template> <script> export default { name: "", data() { return {}; }, methods: { handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { console.log("file 转 base64结果:" + reader.result); }; reader.onerror = function(error) { console.log("Error: ", error); }; }, } }; </script> <style scoped> /* @import url(); 引入css类 */ </style>
注意:
今天在使用Vue进行文件上传的代码编写时,发现报错:
Error in v-on handler: "TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'."
`
显然,是传入的file对象出了问题,根据报错提示,我们应该传入一个Blob对象。也就是说,file不是Blob对象
我们使用console.log(file)进行调试输出:
看,raw这个属性写了个大大的File
把raw这个File对象传入即可
OK啦!!!
-
Vue实现base64编码图片间的切换功能
2020-12-13 12:49:21昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就... -
vue-cli3.0图片转base64规则配置
2018-09-01 20:40:53vue-cli3.0图片打包,小于10k的图片没有自动转base64问题处理 -
在vue中使用Base64转码的案例
2020-11-19 21:23:46const Base64 = require('js-base64').Base64 new Vue({ el: '#app', Base64 }) 3:在需要转码的文件中使用 const Base64 = require('js-base64').Base64 const exStr = Base64.encode('base64') console.log... -
Vue实现图片转Base64上传案例
2020-11-09 09:54:58图片转Base64上传案例一、前端图片转Base64二、后台Base64转图片三、前端Base64转图片 一、前端图片转Base64 获取图片,将图片转为Base64字符串,AJAX提交到后台进行处理,前端使用了Vue基础。 在这里插入代码片 二...Vue实现图片转Base64上传案例
一、前端图片转Base64
获取图片,将图片转为Base64字符串,AJAX提交到后台进行处理,前端使用了Vue基础。但是这种做法会比较复杂,后续会使用vant框架实现。
<!--上传图片--> <div style="width: 90%;margin-left: 5%;margin-top: 30px"> <div class="pics" v-for='(value, key) in imgs' style="text-align:center;float: left;width: 19%;"> <div class="onepicdiv" style="float:left;width: 100%;"> <div> <img class="onepic" :id=key :src="getObjectURL(value)" style="width: 85%;" @click="showImgs(value)"> </div> <div @click="delImg(key)" style="color: #999999;width: 100%;font-size: 13px;color: #999999;position: relative;top: -63px;left: 26px"> <van-icon name="close" color="rgb(0,0,0)"/> </div> </div> </div> <div v-if="imgLen>=5 ? false : true"> <div class="addpicture"> <input id="myfile" type="file" @change="addImg" ref="inputer" multiple accept="image/*" style="opacity:0;width: 100%;"/> </div> </div> <div style="font-size: 10px;padding-top: 40px;color: #999999"> {{imgLen}}/5</div> </div> <!--放大图片时被放大的图片和图片列表之间的遮罩层--> <div id="showpicmask"> <div v-show="show" @click="back()" style="position: fixed;z-index: 100;height: 100vh;width: 100%;background-color: rgba(0,0,0,0.95) "> </div> </div> <!--被放大的图片--> <div id="showpic"> <div v-show="show" @click="back()" style="position: fixed;z-index: 101;width:100%;height: 100vh;display: flex;float: left;align-items: center;justify-content: center;"> <img :src="picpath" style="width: 100vw;"> </div> </div> <script> //上传图片 addImg(event) { let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 this.fil = inputDOM.files; let oldLen = this.imgLen; let len = this.fil.length + oldLen; if (len > 5) { alert('最多可上传5张,您还可以上传' + (5 - oldLen) + '张'); return false; } for (let i = 0; i < this.fil.length; i++) { let size = Math.floor(this.fil[i].size / 1024); if (size > 3 * 1024) { layer.msg('请选择3M以内的图片'); return false; } for(key in this.imgs){ if(key == this.fil[i].name){ layer.msg("请勿上传同一张图片") return } } this.imgLen++; this.$set(this.imgs, this.fil[i].name , event.target.files[i]); //转换为base64 let self = this; let reader = new FileReader(); reader.readAsDataURL(event.target.files[i]); if (size > 1024) {//图片大于1M,进行压缩 if (typeof (FileReader) === 'undefined') { console.log("当前浏览器内核不支持base64图标压缩"); //调用上传方式 不压缩 } else { var file = event.target.files[i]; if (!/image\/\w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } //压缩图片 reader.onload = function (event) { if (reader.readyState === 2) { let image = new Image() //新建一个img标签(不嵌入DOM节点,仅做canvas操作) image.src = event.target.result; //让该标签加载base64格式的原图 image.onload = function () { let canvas = document.createElement('canvas'), //创建一个canvas元素 context = canvas.getContext('2d'), //context相当于画笔,里面有各种可以进行绘图的API imageWidth = image.width / 2, //压缩后图片的宽度,这里设置为缩小一半 imageHeight = image.height / 2, //压缩后图片的高度,这里设置为缩小一半 data = '' //存储压缩后的图片 canvas.width = imageWidth //设置绘图的宽度 canvas.height = imageHeight //设置绘图的高度 //使用drawImage重新设置img标签中的图片大小,实现压缩。drawImage方法的参数可以自行查阅W3C context.drawImage(image, 0, 0, imageWidth, imageHeight) //使用toDataURL将canvas上的图片转换为base64格式 data = canvas.toDataURL('image/jpeg') var st = data.indexOf(','); var stnew = parseInt(st) + 1; data = data.substring(stnew); self.$set(self.filelist, self.fil[i].name, data); }; } } } } else { reader.onload = function (event) { self.headImg = event.target.result; //img base64 var st = self.headImg.indexOf(','); var stnew = parseInt(st) + 1; self.headImg = self.headImg.substring(stnew); self.$set(self.filelist, self.fil[i].name, self.headImg); } } } }, getObjectURL(file) { const that = this; var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }, //删除图片 delImg(key) { const that = this; this.$delete(that.filelist, key); this.$delete(this.imgs, key); this.imgLen--; }, //放大图片 showImgs(value) { var url = this.getObjectURL(value); picmask.show = true showpic.show = true showpic.picpath = url }, </script>
二、后台Base64转图片
后台获取前端Base64字符串,这里在后台转换为图片,存放到指定目录,并将新定义的图片名保存至数据库
//DataObject.java用于存储key-value类型数据的数据结构 //DataStore.java用于存储列表格式数据的数据结构。 //图片处理 DataObject objfile= DataObject.parseJSON(files); DataStore fileds = DataStore.getInstance(); Set<String> keySet = objfile.keySet();// vdo里的键都是string Iterator<String> it = keySet.iterator();// 开始遍历 String key;// vdo的键 Object value;// 值(数据类型待判断) int n=0; while (it.hasNext()) { key = it.next(); value = objfile.get(key); if (value instanceof String) { //System.out.println("key=="+key +",value="+value); fileds.put(n, "imgname", key); fileds.put(n, "imgbase", value); } else { throw new BizException("files不是一个String类型的值"); } n++; } if(fileds.rowCount()>0){ DataObject returnobj = DataObject.getInstance(); DataStore urlds = DataStore.getInstance(); for (int j = 0; j < fileds.rowCount(); j++) { String imgStr = fileds.getString(j, "imgbase"); String FILEPATH = picurl + suggestImgs; Calendar tempewmscsj = Calendar.getInstance(); long sjid = tempewmscsj.getTimeInMillis(); String idstr = String.valueOf(sjid); String nowstr = DateUtil.getCurrentTime(); String fileName = "img_" + nowstr + "_" + idstr + ".jpg"; fileNames = fileNames + ";" + fileName; //对字节数组字符串进行Base64解码并生成图片 String imgUrl = ""; //图像数据为空 if (StringUtils.isBlank(imgStr)) { returnobj.put("retuendata", imgUrl); } BASE64Decoder decoder = new BASE64Decoder(); byte[] b = decoder.decodeBuffer(imgStr); for (int i = 0; i < b.length; ++i) { //调整异常数据 if (b[i] < 0) { b[i] += 256; } } //文件目录不存在则创建 File outFile = new File(FILEPATH); if (!outFile.exists()) { outFile.mkdirs(); } //文件最终的存储位置 File dest = new File(FILEPATH + File.separator + fileName); //判断目标文件所在的目录是否存在 if (!dest.getParentFile().exists()) { //创建目录 if (!dest.getParentFile().mkdirs()) { returnobj.put("retuendata", imgUrl); } } //新生成的图片 imgUrl = FILEPATH + File.separator + fileName; //这种写法不需要flush或者close 会自动关闭 FileOutputStream 实现了java中的java.lang.AutoCloseable接口。 try (OutputStream out = new FileOutputStream(FILEPATH + File.separator + fileName);) { out.write(b); } catch (Exception e) { //logger.info("Base64Util GenerateImage e:" + e.getLocalizedMessage()); } finally { returnobj.put("retuendata", imgUrl); } urlds.put(j, "imgurl", returnobj.getString("retuendata")); } } //数据库中存放新定义的图片名等信息 ...
三、前端Base64转图片
如果选择第二步在后台直接存储Base64字符串到数据库,则可以在前端把Base64转为图片
let file = img.src; // 把整个base64给file let name = filename + ".png"; // 定义文件名字(例如:cober.png) var type = "image/png"; // 定义图片类型(canvas转的图片一般都是png,也可以指定其他类型) let conversions = base64ToBlob(file, type); // 调用base64转图片方法 // conversions 就是转化之后的图片文件, function base64ToBlob(urlData, type) { let arr = urlData.split(','); let mime = arr[0].match(/:(.*?);/)[1] || type; // 去掉url的头,并转化为byte let bytes = window.atob(arr[1]); // 处理异常,将ascii码小于0的转换为大于0 let ab = new ArrayBuffer(bytes.length); // 生成视图(直接针对内存):8位无符号整数,长度1个字节 let ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob([ab], { type: mime }); },
-
vue网络图片转base64
2020-04-21 10:29:31单张图片转Base64 <script> methods: { //异步执行 imageUrlToBase64() { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin'...单张图片转Base64
<script> methods: { //异步执行 imageUrlToBase64() { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin', 'anonymous'); let imageUrl = "http://img1.imgtn.bdimg.com/it/u=4012470373,3540768040&fm=26&gp=0.jpg"; image.src = imageUrl let that = this; //image.onload为异步加载 image.onload = () => { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext('2d'); context.drawImage(image, 0, 0, image.width, image.height); var quality = 0.8; //这里的dataurl就是base64类型 var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长! } }, } </script>
多张图片转Base64
<script> data() { return { base64Datas: [], } methods: { imageUrlToBase64(){ let data = [ "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png", "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png", "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png" ] this.imageUrlToBase64(data, 1, data.length); }, //采用递归同步执行 onloadImg(data, i, len) { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin', 'anonymous'); let imageUrl = "http://bigf.cqugeo.cn/landslip/res/defaultImages/default.png"; image.src = imageUrl let that = this; //image.onload为异步加载 image.onload = () => { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext('2d'); context.drawImage(image, 0, 0, image.width, image.height); var quality = 0.8; //这里的dataurl就是base64类型 var dataURL = canvas.toDataURL("image/jpeg", quality);//使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png,因为压缩成png后base64的字符串可能比不转换前的长! //数组存放图片base64 that.base64Datas.push(dataURL); //递归执行图片url转base64 i = i + 1; if (i <= len) { that.onloadImg(data1, i, len) } } }, } </script>
-
vue 图片file转Base64编码格式(以及base64转图片文件)
2021-10-30 16:04:36图片file转Base64编码格式 imageToBase64 (file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { console.log('file 转 base64结果:' + reader.result) this.... -
VUE图片转Base64
2021-05-18 09:37:51// 把图片转为base64格式 imageToBase64 () { let that = this //防止function里指代不明确 let image = new Image() image.crossOrigin = '' image.src = this.imageUrl image.onload = function () { that.... -
vue网络图片url转Base64
2020-04-09 15:18:33单张图片转Base64 <script> methods: { //异步执行 imageUrlToBase64() { //一定要设置为let,不然图片不显示 let image = new Image(); //解决跨域问题 image.setAttribute('crossOrigin'... -
js 图片转base64的方式(两种)
2021-01-19 16:43:48使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta ... -
Vue实现上传图片转base64编码(案例详细步骤)
2021-10-19 18:22:05点击按钮然后选择电脑里的图片,下面列表会进行图片的预览展示,提交表单便会提交图片的信息(通常是将图片转换成base64编码存入数据库中) 实现步骤 <el-upload list-type="picture" action='' accept=".jpg, .... -
Drawing.vue 手写签名,base64 转文件, 并上传图片
2019-09-09 11:12:47手把手教你使用canvas 手写签名,并上传图片,cancas 中自动是生成文字, 签名中需要用的到技术基本包含, 尽量不让你懂脑子,拿过来就用,(上传图片接口需要修改)上传图片转base64 base64转文件, 上传图片使用... -
Vue开发实战十四:图片转base64上传及修改的实现
2022-02-11 09:23:16说明:实际项目中需要我们将图片转为base64作为一个字段保存,下面我们来探究下如何实现一个图片base64的上传及修改 1.最终效果 图片上传 图片修改 2.布局 <el-form-item label="图标" prop="icon"> <... -
js、vue图片链接转成base64
2021-10-19 10:25:491、创建imgUrlToBase64.js文件 ... let base64Url = ""; let image = new Image(); image.setAttribute("crossOrigin", "anonymous");//解决跨域问题 image.src = imgUrl; image.onload = function -
前端vue图片上传并转base64
2022-02-22 10:47:42可以作为一个公共方法,看自己需求,需要传入一个上传成功的图片ile文件 const imgupload = (file, ... //文件base64化,以便获知图片原始尺寸 reader.onload = function (e) { typeof callback === 'functio.. -
Vue将图片转化为base64
2021-11-09 11:11:46在div写入上传文件的input 框 下面是script export default { methods: { File() { let file = this.$refs.upFile.files[0]; var reader = new FileReader(); reader.readAsDataURL(file... 以上就是转换base64的方法了 -
vue 图片转base64本地路径跨域
2020-05-16 18:17:29getUrlBase64(url, ext, callback) { var canvas = document.createElement("canvas"); //创建canvas DOM元素 var ctx = canvas.getContext("2d"); var img = new Image; img.crossOrigin = -
vue 上传图片转base64数据流发送给后端
2021-04-21 16:18:27vue 上传图片转base64数据流发送给后端 1.在这个方法里边转参数file 2.在handleAvatarSuccess 这个发布方法里边这样写 3.如果报这个错误就这样写打印出来file依次类推 "TypeError: Failed to execute '... -
vue将图片网络地址转base64格式
2020-07-20 16:49:17vue中将图片网络地址转base64格式 bannerToBase64(imgUrl) { // 一定要设置为let,不然图片不显示 const image = new Image(); // 解决跨域问题 image.setAttribute('crossOrigin', 'anonymous'); const ... -
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2020-12-10 02:18:11但是在使用vue-quill-editor有一个致命的问题,vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大,即使图片不大,只要图片较为多,篇幅较长,富文本的... -
使用HTML5的File实现base64和图片的互转
2020-09-28 02:30:44内联图片即使把图片文件编码成base64,优点是可以减少http的请求,缺点是不能跨域缓存,用html5的file api里的 readAsDataURL函数 这是一个把文件转化成base64编码 -
@vue/cli图片转base64链式配置
2021-05-26 17:22:32vue.config.js process.env.NODE_ENV === 'production':生产环境生效 limit: 5000:图片文件小于5kb则转换 chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-... -
前端 Vue.js 实践 图片文件转base64方法
2020-07-15 01:13:23') } return isJPG && isLt2M }, getFile (file, fileList) { this.getBase64(file.raw).then(res => { this.monsterList[fileList.id - 1].img = res for (var i = 0; i ; i++) { axios.post('/api/xxxxx', { XXX:...
收藏数
24,047
精华内容
9,618