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

ralap 发布于2019-08-23 10:35 / 2364人阅读

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

对于前端人员来说，图片处理是一个很常见的需求，由于图片稍微特殊，现在多数做法都是使用调用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字符串即可！
以上就是本文全部内容。

云服务器私有云图片上传服务器并预览 base64图片生成 php 预览上传图片上传图片预览php

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

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

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

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

Luosunce 2019-08-23 10:25 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

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

Lsnsh 2019-08-02 11:04 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

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

NeverSayNever 2019-08-29 17:00 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

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

wums 2019-08-02 11:46 评论0 收藏0