温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-07-24 11:28:39 来源:亿速云 阅读:340 作者:小新 栏目:web开发

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

使用element ui upload组件实现思路

代码如下:

 <el-upload
   ref='upload'
   :auto-upload='false' 
   :file-list="fileList" 
   :multiple='false'
   :limit="1"
   :on-exceed="handleExceed"
   :http-request="uploadFiles" 
   accept="image/jpeg,image/gif,image/png"
   action=''
   :on-change='changeUpload'      
   >
  <el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
  <span>&nbsp;</span>
  <el-button @click='uploadFiles' size="mini" type="primary">点击上传</el-button>
 </el-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上传图片并预览”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI