资讯专栏INFORMATION COLUMN

vue.js图片转Base64上传图片并预览

ralap / 2569人阅读

摘要:对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用接口通过方法来提交,例如方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同

对于前端人员来说,图片处理是一个很常见的需求,由于图片稍微特殊,现在多数做法都是使用调用ajax接口通过http方法来提交,例如post方法提交,后台处理后返回一个图片路径给前端,前端根据这个路径写入img标签,但是基于当前的前后端分离的开发模式下,前后端代码往往不在同一个系统目录下,而且部署时可能liunx路径与windows路径不一样,这样后期路径更改可能会导致维护困难问题出现。

针对这种问题,这里我推荐使用图片转base64格式,再发给后端,后端只需将转码结果存入数据库即可,前端调用接口直接获取到base64数据直接写入img src 标签即可

下面使用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字符串即可!
以上就是本文全部内容。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96486.html

相关文章

  • 前端文件上传(js/vue.js/axios/canvas图片压缩)

    摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...

    Luosunce 评论0 收藏0
  • 前端文件上传(js/vue.js/axios/canvas图片压缩)

    摘要:哈哈主要还是我嫌麻烦四上传图片这里的页面样式,图片压缩和预览都和上面一样,这里我主要配置一下的,让接口能够成功上传。如果想让用户有更好的体验,可以对图片进行一下压缩和本地预览。 一、通过Form表单提交上传 HTML enctype属性必不可少 上面一种方法通过表单自有属性进行提交,看似简单,但是也有其最大的缺点,那就是提交...

    Lsnsh 评论0 收藏0
  • 图片上传预览压缩base64详解(dShowImg64.js

    摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...

    NeverSayNever 评论0 收藏0
  • 图片上传预览压缩base64详解(dShowImg64.js

    摘要:本次的内容是图片的上传预览。待上传图像点击蓝色框内,可以选择文件,移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello,大家好,游戏开始了,欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说,先上图。showImg(https://segmentfault.com/img...

    wums 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<