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
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 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连接Oracle数据库
2006/10/09 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python实现代码统计工具(终极篇)
2016/07/04 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
应届大学生自荐信
2013/12/05 职场文书
法学个人求职信范文
2014/01/27 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2016七夕情人节感言
2015/12/09 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python