vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径

一 , 项目根路径npm i vant , 安装vant组件库 ,

main.js中引入并注册vant

二 , 页面中使用 van-uploader上传文件的组件

第一种方法 : 在提交表单时拿到上传的图片文件 , 转成base64 , 但在提交的函数内部打印ar还是空数组 , 不知道是什么原因 , 应该跟作用域有关系 , 研究半天没解决, 希望有知道的大佬指点下 , 然后就想出了第二种方法解决的

<template><div><van-form ref="formRef"><van-field><template #input><van-uploader v-model="fileList" multiple accept="image/*" /></template></van-field><van-field><template #button><van-button type="info" native-type="submit" @click="tj">提交</van-button></template></van-field><img :src="picPath" alt=""></van-form></div>
</template><script>export default {name: '',data() {return {// 上传的文件列表fileList: [],// 图片路径picPath: "",arr:[]}},methods: {//点提交时tj() {console.log("提交表单");// 上传的图片let files = this.fileList[0].file//转码base64let reader = new FileReader();let imgFile;reader.readAsDataURL(files);reader.onload = e => {imgFile = e.target.result;this.arr = imgFile.split(",");// arr[1] 就是图片的 Base64加密字符串console.log(this.arr[1]);//base64字符串拼接形成图片的src路径this.picPath = 'data:image/png;base64,' + arr[1]}//这里的this.arr还是之前的空数组, 所以这里打印出 undefinedconsole.log(this.arr[1]);}}}</script><style lang="" scoped></style>

第二种方法 : 在van-uploader组件自带的after-read回调函数中拿到上传的图片文件 , 转成base64,

再点提交的时候打印this.arr[1]已经变成base64字符串了, 可以提交表单时携带

<template><div><van-form ref="formRef"><van-field><template #input><van-uploader v-model="fileList" multiple accept="image/*" :after-read="afterRead" /></template></van-field><van-field><template #button><van-button type="info" native-type="submit" @click="tj">提交</van-button></template></van-field></van-form></div>
</template><script>export default {name: '',data() {return {// 上传的文件列表fileList: [],arr: []}},methods: {// 选择图片后触发afterRead(e) {// 上传的图片console.log(e.file);let reader = new FileReader();let imgFile;reader.readAsDataURL(e.file);reader.onload = e => {imgFile = e.target.result;this.arr = imgFile.split(",");// arr[1] 就是图片的 Base64编码字符串console.log(this.arr[1]);}},tj() {//这里打印this.arr[1]已经变成base64字符串了, 可以提交表单时携带console.log(this.arr[1]);}}}</script><style lang="" scoped></style>

vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径相关推荐

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离文档在上面搭建起 ...
解决vue中textarea不换行
换行问题: vue 中用 {{}} 进行数据绑定的时候,如果你想让字符串换行是不生效的解决办法:不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "111 ...
vue中将md转成html,Vue/Vue中Html和Markdown互相转换/README.md · 倚栏听风/LearningNotes - Gitee.com...
# Vue中Html和Markdown互相转换 ## 前言最近想实现的一个功能,就是将系统中的博客进行导出成Markdown格式,后面经过了调研发现有两种方法能够满足需求,一个是Java后台中将HT ...
vue 转换成 html,Vue/Vue中Html和Markdown互相转换/README.md · cyh90/LearningNotes - Gitee.com...
# Vue中Html和Markdown互相转换 ## 前言最近想实现的一个功能,就是将系统中的博客进行导出成Markdown格式,后面经过了调研发现有两种方法能够满足需求,一个是Java后台中将HT ...
vue中使用moment处理时间戳转换成日期或时间格式
vue中使用moment处理时间戳转换成日期或时间格式 npm i moment import moment from 'moment' <template><div>< ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
vue中网址转换图片
后端接口返回网址,需要直接展示在列表中的时候(不做修改), 注释的是接受网址的参数,可以查看网址链接. < img :src="InvoiceImage" style=&qu ...
vue中base64图片展示提示图片报错：GET data:image/png；base64,undefined net::ERR_INVALID_URL
我把后端和前端都部署到了云服务器上.部署后端后,通过本地启动的前端连接服务器上的后端后,可以正常访问.但是通过部署在服务器上的前端项目访问页面时有报错,可能图片的相关报错. 造成这样的原因 <i ...
Vue中动态（import 、require）显示img图片
vue中,经常会遇到显示图片的问题, 如果是一个普通组件的话,那么这样就可以了 <img src="../assets/images/avtor.jpg" width=&qu ...

vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径

一 , 项目根路径npm i vant , 安装vant组件库 ,

main.js中引入并注册vant

二 , 页面中使用 van-uploader上传文件的组件

vue中怎么把图片转换成base64字符串 , 以及base64字符串怎么转换成图片路径相关推荐

最新文章

热门文章