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 相关文章推荐
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue使用element-ui按需引入
May 20 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
EJB实例的生命周期
2016/10/28 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
大学毕业感言
2014/01/10 职场文书
保护环境建议书300字
2014/05/13 职场文书
无私奉献演讲稿
2014/09/04 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
小学生通知书评语
2014/12/31 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
python库sklearn常用操作
2021/08/23 Python
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js
Java版 简易五子棋小游戏
2022/05/04 Java/Android