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通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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 cc攻击代码与防范方法
2012/10/18 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
python 网络编程详解及简单实例
2017/04/25 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python实现随机梯度下降法
2020/03/24 Python
python3调用windows dos命令的例子
2019/08/14 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
4s店机修工岗位职责
2013/12/20 职场文书
廉洁教育学习材料
2014/05/19 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
天河观后感
2015/06/11 职场文书
小学英语教学随笔
2015/08/14 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
python xlwt模块的使用解析
2021/04/13 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技