vue.js如何实现图片转Base64上传图片并预览

这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base64上传图片并预览”这篇文章吧。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的平阴网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

使用element ui upload组件实现思路

代码如下：

 
  选取图片
   
  点击上传
 

js部分

  //点击上传图片,上传成功返回图片路径 
  uploadFiles(){
    var That=this;
   let file=this.$refs.upload.$refs['upload-inner'].$refs.input; //获取文件数据
   let fileList=file.files;   
   var imgFile;
   let reader = new FileReader();   //html5读文件
   reader.readAsDataURL(fileList[0]); //转BASE64    
   reader.onload=function(e) {    //读取完毕后调用接口
    imgFile = e.target.result;
    let obj={
      id: "loginLogo",
      configGroup: "logo",
      configItem : "loginLogo",
     itemValue : imgFile  
    }
    return BaseApi.uploadFiles(obj).then((res)=>{
      if(res.status=='SUCCESS'){
        AlertBox('图片上传成功！','success',true).then(()=>{
          return That.getSysLogo(); //调用获取base64数据接口
        });
      }else{
        Alert('图片上传失败',res);
        return ''
      }
    })

   };     
  },

最后在界面img src标签中绑定That.getSysLogo()接口返回的base64字符串即可！

以上是“vue.js如何实现图片转Base64上传图片并预览”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！