Vue怎么结合ElementUI上传Base64编码后的图片

今天小编给大家分享一下Vue怎么结合ElementUI上传Base64编码后的图片的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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);

上传实现

ElementUI把上传的图片转为Base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可

             选择图片上传,最多上传一张图片          

定义methods方法,当上传文件就会触发绑定的函数，然后文件的内容就会绑定到函数的参数里面，这样用file.raw就可以获取文件的内容了。

  getFile(file, fileList) {     console.log(file.raw)    },

然后自定义一个方法，用来把图片内容转为base64格式，imgResult就是base64格式的内容了。转为base64字符串要调用h6特性中的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怎么结合ElementUI上传Base64编码后的图片"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。