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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
Vue router配置与使用分析讲解
Dec 24 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 实现判断用户是否手机访问
2015/01/21 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python实现控制台输入密码的方法
2015/05/29 Python
python中list列表的高级函数
2016/05/17 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
应付会计岗位职责
2013/12/12 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
工厂见习报告范文
2014/10/31 职场文书
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers