vue项目base64转img方式
目录
- base64转img方式
- 效果展示
- base64和jpg/png互转
- base64的转换
base64转img方式
输入框:
<el-input class="input-box" ref="elInputText" type="textarea" v-model="content" @paste.native="onPasteEvent" @keydown.native.enter.prevent="handlerKeyupEnter" ></el-input>
设定一个 dialog 弹框。
<!-- 图片预览dialog --> <el-dialog title="图片预览" :visible.sync="previewImgObj.show" v-if="previewImgObj.show" append-to-body > <img width="100%" v-if="previewImgObj.imgUrl" class="ly-margin-center" :src="previewImgObj.imgUrl" v-image-view /> <span slot="footer" class="dialog-footer"> <el-button @click="previewImgObj.show = false">取 消</el- button> <el-button type="primary" @click="sendBase64ImgMessge">确 定</el-button> </span> </el-dialog> // 监听粘贴事件 async onPasteEvent(e) { e.preventDefault(); let data = await addEventPasteListener(e); if (data.type === "string") { // 复制某条消息 if (!data.string) return; // console.log(data.string) // 正则表达式判断data是否是base64 function validDataUrl(s) { return validDataUrl.regex.test(s); } validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i; // 如果是base64转换成图片预览 if (validDataUrl(data.string)) { let that = this; function previwImg(item) { that.previewImgObj = { show: true, imgUrl: item }; } previwImg(data.string); } }
效果展示
base64和jpg/png互转
base64的转换
在中调用base64格式的照片
方式一
<image :src="getBase64(base64)"/>
getBase64(base64){ var changebase64='data:image/jpg;base64,'+base64.replace(/[\r\n]/g,'') console.log(changebase64) return changebase64 },
方式二:vue -element 在image组件中直接调用base64
<el-table :data="devicePersonData" > <el-table-column label="照片"> <template #default="scope"> <el-image style="width: 60px;border-radius: 6px" :src="getBase64(scope.row.base64)"></el-image> </template> </el-table-column> <el-table-column label="姓名" prop="name"> </el-table-column> </el-table-column> </el-table>
// 转换base64 getBase64 (base64) { return 'data:image/png;base64,' + base64 }
方式三:Element UI 中将上传的图片转换成base64
<el-upload class="avatar-uploader" action="company/update" :headers="headers" :auto-upload="false" :data="logoData" :show-file-list="false" :on-change="getFile"> </el-upload>
// <el-upload>组件中的on-change事件(将获取到的照片文件去转换为base64) getFile (file, fileList) { //这里使用'.then()'去获取Promise的返回结果 this.changeBase64(file.raw).then(res => { this.imageUrl = res }) }, //将获取到的照片文件去转换为base64 changeBase64 (file) { return new Promise(function (resolve, reject) { const reader = new FileReader() let imgResult = '' reader.readAsDataURL(file) reader.onload = function () { imgResult = reader.result } reader.onerror = function (error) { reject(error) } reader.onloadend = function () { resolve(imgResult) } }) }, // 因为转换后的base64是带头部的,如果需要去掉则可以使用replace()去替换 const Base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA......" // place(serchValue:/搜索字符串/,replaceValue:'替换字符串') Base64.replace(/^data:image\/\w+;base64,/, '')
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)