精华内容
下载资源
问答
  • Vue中图片转base64格式

    2021-01-12 16:58:35
    // 图片转base64格式 挂载在全局 Vue.prototype.$base64Img = (e) => { return new Promise(function (resolve, reject) { // 使用Promise进行异步处理 let fileSize = 0 const fileMaxSize = 1024 // 设置...

    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格式

    展开全文
  • 1. 上传图片时:pc端正常可以传多张图片;手机端只能一张一张上传;(可以完善);使用前端框架有:WeUi,vant ;style:/*改造上传图片*/.applay-uploadimg.weui-uploader__bd{margin-bottom:0;margin-right:0;}....

    1. 上传图片时:pc端正常可以传多张图片;手机端只能一张一张上传;(可以完善);

    使用前端框架有:WeUi,vant ;

    style:

    /*改造上传图片 */

    .applay-uploadimg .weui-uploader__bd{  margin-bottom: 0;margin-right: 0; }

    .applay-uploadimg .weui-uploader__input-box{width: 100px; height: 100px;}

    .applay-uploadimg  .weui-uploader__file { margin-right: 15px;position: relative;width: 100px; height: 100px;}

    .applay-uploadimg  .weui-uploader__file .upload-del{padding-top: 3px;position: absolute;right: 0px;bottom: 0;width: 100%;background-color: rgba(0,0,0,.5);}

    js:代码

    data:参数:

    finished:false,

    loading:false,

    formData:new FormData(),//参数;暂时没有;可以扩展;

    imgs: {},//上传身份证图片;暂时没有;可以扩展;

    imgLen:0, //上传身份证图片长度;

    imgCoverLen: 0,//上传门店图片长度;

    entity:{

    wechat_openid:open_id,

    role_id:"",//等级

    cover:[],

    cardid:'',

    cardid_photo:[],

    },

    /**

    * 上传身份证图片

    */

    addImg:function(event){

    var that=this;

    // that.$toast('图片上传中...');

    let inputDOM1 = this.$refs.inputer;

    // 通过DOM取文件数据

    this.fil = inputDOM1.files;

    let oldLen=this.imgLen;

    let len=this.fil.length+oldLen;

    if(len>2){

    this.$toast('最多可上传2张,您还可以上传'+(2-oldLen)+'张');

    return false;

    }

    // that.$toast.loading();

    for (let i=0; i 

    let size2 = Math.floor(this.fil[i].size / 1024);

    if (size2 > 3*1024) {

    this.$toast('请选择3M以内的图片!');

    return false

    }

    this.imgLen++;

    var reader = new FileReader();

    reader.readAsDataURL(this.fil[i]);

    reader.onload = function (e) {

    // 读取到的图片base64 数据编码 将此编码字符串传给后台即可

    var imgcode = e.target.result;

    that.$toast.loading("上传图片中...");

    axios.post('/api/uploads/add',{file:imgcode}).then(function(res){

    if(res.data.code == 0){

    that.entity.cardid_photo.push(res.data.data.url);

    }else{

    that.$toast(res.data.message);

    }

    })

    }

    }

    //  console.log(this.entity.cardid_photo)

    },

    //删除上传的身份证照片;

    delImg:function(key){

    this.$delete(this.entity.cardid_photo,key);

    this.imgLen--;

    this.entity.cardid_photo=this.entity.cardid_photo;

    // console.log(this.entity.cardid_photo)

    },

    addCoverImg:function(event){

    var that=this;

    let inputDOM2 = this.$refs.inputer2;

    // var reader=new FileReader();

    // 通过DOM取文件数据

    this.fil2 = inputDOM2.files;

    let oldLen=this.imgCoverLen;

    let len=this.fil2.length+oldLen;

    if(len>5){

    this.$toast('最多可上传5张,您还可以上传'+(5-oldLen)+'张');

    /*alert('最多可上传5张,您还可以上传'+(5-oldLen)+'张');*/

    return false;

    }

    // that.$toast.loading();

    for (let i=0; i 

    let size = Math.floor(this.fil2[i].size / 1024);

    if (size > 3*1024) {

    this.$toast('请选择3M以内的图片!');

    return false

    }

    this.imgCoverLen++;

    var reader2 = new FileReader();

    reader2.readAsDataURL(this.fil2[i]);

    reader2.onload = function (e) {

    // 读取到的图片base64 数据编码 将此编码字符串传给后台即可

    var imgcode2 = e.target.result;

    that.$toast.loading("上传图片中...");

    axios.post('/api/uploads/add',{file:imgcode2}).then(function(res){

    if(res.data.code == 0){

    that.entity.cover.push(res.data.data.url);

    }else{

    that.$toast(res.data.message);

    }

    })

    };

    }

    // console.log(this.entity.cover)

    },

    //删除上传的门店照片;

    delCoverImg:function(key){

    this.$delete(this.entity.cover,key);

    this.imgCoverLen--;

    this.entity.cover=this.entity.cover;

    },

    展开全文
  • 关于vue中img无法展示base64图片的原因分析:(1)返回不是base64位数据,这个不用多说。(2)若服务端返回的确实是base64位数据,详细检查一下是否符合规范的base64格式一次经历,服务端确实返回了base64位的数据如下...

    关于vue中img无法展示base64位图片的原因分析:

    (1)返回不是base64位数据,这个不用多说。

    (2)若服务端返回的确实是base64位数据,详细检查一下是否符合规范的base64格式

    一次经历,服务端确实返回了base64位的数据如下:

    /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFQ==

    乍一看还真是base64位数据,值也给到了img的src属性中,但是为啥还是不正常显示呢?

    其实上述这个并不是标准的base64格式,标准的格式应该是这样的:data:image/png;base64,开头+服务端返回的数据,这样就可以了。标准如下:

    data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjItRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er==

    拼接示例如下:

    realBase64='data:image/png;base64,'+data.FileForBase64;

    点赞是最好的支持,关注是最大的鼓励。亲爱的朋友,很荣幸在简书遇到您,若有疑问,欢迎探讨~~~。

    展开全文
  • Vue中base64 转图片上传

    2020-08-24 16:18:04
    // 拍照获取图片base64 // imgsrc: base64图片资源 refreshDataList (imgsrc) { ...// base64转图片资源 baseImg (dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1]
    // 拍照获取图片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],
              bstr = atob(arr[1]),n = bstr.length,
              u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
              }
          return new Blob([u8arr], {type: mime})
        },
    

    Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
    ---------- 创作不易,感谢大家,请多多支持!
    在这里插入图片描述

    展开全文
  • 在使用vue cli4的过程,我们遇到比较小的图片成了base64格式的编码。但实际使用的时候不需要,因为转码后的图片不够清晰,特别是在大屏和高分辨率的显示器时尤甚。 参考文献:vue.config.js配置参考 功能 ...
  • getbase64是获取上传的图片路径后转base64的方法
  • 1. 上传图片时:pc端正常可以传多张图片;手机端只能一张一张上传;(可以完善); 使用前端框架有:WeUi,vant ; style: /*改造上传图片 */ .applay-uploadimg .weui-uploader__bd{ margin-bottom: 0;margin-...
  • 手把手教你使用canvas 手写签名,并上传图片,cancas 自动是生成文字, 签名需要用的到技术基本包含, 尽量不让你懂脑子,拿过来就用,(上传图片接口需要修改)上传图片转base64 base64转文件, 上传图片使用...
  • 公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在...
  • Vue项目pdf(base64)转图片

    千次阅读 2018-10-19 06:34:13
    公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在...
  • 作者:yeyan1996转发链接:https://juejin.im/post/5bc97ab6e51d450e5d0b7dcb公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细...
  • 公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细,在实现的过程遇到很多坑,经过一天的研究终于实现了这个功能,分享一下我在...
  • 在C#下使用Convert.ToBase64String()将Picture控件Image转换成Base64字符串,再使用Convert.FromBase64String()将Base64字符串成Picture控件Image,这个没问题。但在Vue前端使用“‘data:image/png;base64,’+...
  • 作者:yeyan1996转发链接:https://juejin.im/post/5bc97ab6e51d450e5d0b7dcb公司有个业务需求,要求后台传pdf的base64编码给前端,前端显示到界面上,后来在网上搜索了很多关于base64转pdf的文章,都写的不是非常的详细...
  • 1. 一般情况下,我们可以使用 a 标签进行图片的...2. 将图片链接转换成base64格式,再进行下载。 HTML部分代码如下: // 参数为可选项 <div @click="downloadImg('图片的地址', '图片的名称')">点击下载</d
  • vue项目base64转img

    千次阅读 2019-09-30 16:16:43
    最近一个vue项目,有个需求是, 发送消息是base64时,转换成图片预览发送出去。 输入框: <el-input class="input-box" ref="elInputText" type="textarea" v-model="content" @paste....
  • <van-uploader v-model="uploadList" :after-read="process"/>...取上传列表中图片的数据 base64数据 //取上传列表中图片的数据 base64数据 uploadList[0].content.replace(/^data:image\/\w+;base64,/, '');
  • 图片转base64  2.手机拍照在ios和小米等手机下会旋转  3.图片的压缩  4.手机像素太大,进行一个等比缩放上传 啰嗦完了,上代码   <template> <div id="face"> <...
  • 我们在使用vue-quill-editor富文本编辑器的时候,上传的图片返回的都是很长的base64的格式,往往都需要转换成图片的url存在数据库里面。 解决思路为在页面上设置一个elementui的文件上传的隐藏域,重写富文本编辑器...
  • 其次,图片转base64后,文件体积变大了大约1/3左右。 文件的base64编码存储到了js文件vue-webpack模板的默认设置限制了转码的文件大小为10000B以下。 静态文件目录的所有文件不会被转码,也就是/static下...
  • 这篇文章主要介绍了关于 vue项目如何实现保存头像以及base64字符串转图片的功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下data() {return {param:{id:"",customerHead: "",}}}let _this = ...
  • <button @click="tesCamera()" type="button" :disabled="isshStatus">... *注意:这里值得注意的是,button标签一定要写type属性等于button,不然HTML5 plus 会识别不了 JS部分 tesCamera(){ ...
  • 昨天在项目开发遇到了一个需要展示多张图片到一个容器的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack配置了图片在10kb以内自动转换base64,所有就...
  • vue吸管拾色器、利用canvas获取坐标点颜色 1.需求:表格主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块,将色值传给后台
  • 这里写自定义目录标题基于vue+springboot,实现图片base64转码保存到数据库 ...前端使用的是elementUi的upload组件,在前端把图片转base64再传到后端。 前端代码如下: <el-upload ref="carUpload
  • 文章目录图片上传处理base64转换后端返回数据后回填显示图片前言一、图片base64是什么?图片base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。二、图片上传处理1.图片大小限制2....
  • spring boot前后端vuebase64转图片互相转换 vue就不展示了,下边只展示Java互相转换的例子。 Java实现图片转化成base64字符串 //图片转化成base64字符串 public static String imgGetBase64() {//将图片...
  • 昨天在项目开发遇到了一个需要展示多张图片到一个容器的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack配置了图片在10kb以内自动转换base64,所有就...
  • 最近做的vue项目好多涉及到图片上传的,为了方便开发就进行了相关总结。因为公司有好多项目,并且使用的是不同后台语言,有的需要通过base64字符串传递,有的需要转换成二进制数据流传递,有的可以直接使用from...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 181
精华内容 72
关键字:

vue中图片转base64

vue 订阅