Elenment-UI 中 el-upload 组件使用 Base64 上传图片

Admin
Admin
Admin
52
文章
6
评论
2018年10月22日21:28:58 评论 6,023 834字阅读2分46秒

日常项目的一个图片上传功能是最经常涉及到的,对于上传一些小的头像时,一开始觉得直接使用 Form 表单形式上传就好了,但是发现这样的话,一个小图片就会发送一个 http 请求资源,大量的小图片的请求资源的话,会造成服务器资源的负担。这时候就需要把图片转成 Base64 位的形式,然后在通过 POST 请求,将数据传到后端。

一、效果显示

二、Vue代码

  1. <template>
  2.     <div>
  3.         <el-upload action="" :multiple="false" :auto-upload="false" :show-file-list="false" :on-change="uploadChange">
  4.             <el-button size="small" type="primary">点击上传</el-button>
  5.             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  6.         </el-upload>
  7.         <div>
  8.             <img :src="base64">
  9.         </div>
  10.     </div>
  11. </template>

三、Vue方法

  1. uploadChange(file){
  2.     var This = this;
  3.     var reader = new FileReader();
  4.     reader.readAsDataURL(file.raw);
  5.     reader.onload = function(e){
  6.         //console.log(this.result) // 这个就是base64编码了
  7.         This.base64 = this.result;
  8.     }
  9. }

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
历史上的今天
10月
22
Admin
  • 本文由 发表于 2018年10月22日21:28:58
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: