VUE之图片Base64编码使用ElementUI组件上传


Posted in Vue.js onApril 09, 2022

ElementUI上传Base64编码后的图片

自我认为ElementUI还是一个很不错的写手机端的组件,所以这次做小项目的时候就用了ElementUI的Upload组件来实现图片的上传,不过ElementUI组件的上传图片更易于实现图片以File文件的形式实现,但是这次我需要把图片转换为base64编码来实现图片的上传。

安装ElementUI

npm i element-ui -S

按需引入(当然如果需要你也可以全部引入)

import { Upload } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Upload);

上传实现 

<template>
    <div>
       <el-upload
          class="avatar-uploader"
          :action="actionUrl"
          :show-file-list="false"
          :on-change="getFile">
          <img v-if="imageUrl" ref="phoUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>
<script>
import {Toast} from "mint-ui";
export default {
   data() {
      return {
       actionUrl:'',
       imageUrl:'', //上传图片
      };
    },
    methods: {
     getBase64(file){  //把图片转成base64编码
         return new Promise(function(resolve,reject){
             let reader=new FileReader();
             let imgResult="";
             reader.readAsDataURL(file);
             reader.onload=function(){
                 imgResult=reader.result;
             };
             reader.onerror=function(error){
                 reject(error);
             };
             reader.onloadend=function(){
                 resolve(imgResult);
             }
         })
     },
     getFile(file,fileList){  //上传头像
       this.getBase64(file.raw).then(res=>{
           this.$http.post('home/ImgUpload',{"img":res}).then(result=>{
               if(result.body.status===200){
                   this.imageUrl=result.body.data;
               }else{
                   Toast('图片上传失败');
               }
           })
       })
     }
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width:101px;
    height:101px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader .el-upload .el-upload__input{
      display: none;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

ElementUI把上传的图片转为Base64

使用组件,然后on-change绑定一个方法来获取文件信息,auto-upload设置为false即可 

 <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
            <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
          </el-upload>

定义methods方法,当上传文件就会触发绑定的函数,然后文件的内容就会绑定到函数的参数里面,这样用file.raw就可以获取文件的内容了。

  getFile(file, fileList) {
     console.log(file.raw)
    },

然后自定义一个方法,用来把图片内容转为base64格式,imgResult就是base64格式的内容了。转为base64字符串要调用h5特性中的FileReader这个api,但是这个api不能return,所以用promise封装一下。

 getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },

最后调用一下

 getFile(file, fileList) {    
      this.getBase64(file.raw).then(res => {
      console.log(res)
      });
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
详解Vue的options
May 15 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 #Vue.js
vue实现列表垂直无缝滚动
Apr 08 #Vue.js
vue3引入highlight.js进行代码高亮的方法实例
vue中的可拖拽宽度div的实现示例
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
You might like
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python访问sqlserver示例
2014/02/10 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
python 读取二进制 显示图片案例
2020/04/24 Python
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
九州传奇上机题
2014/07/10 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
体育教师自荐信范文
2013/12/16 职场文书
机关节能减排实施方案
2014/03/17 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
出国英文推荐信
2014/05/10 职场文书
工程售后服务方案
2014/06/08 职场文书
上班迟到检讨书300字
2014/10/18 职场文书