VUE Base64编码图片展示与转换图片

最新推荐文章于 2024-08-11 12:00:00 发布

Bovia-zdd

最新推荐文章于 2024-08-11 12:00:00 发布

阅读量1.6w

点赞数 4

分类专栏： vue

原文链接：https://www.cnblogs.com/maggieq8324/p/11577697.html

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUE Base64编码图片展示与转换图片

VUE Base64编码图片展示与转换图片

VUE Base64编码图片展示与转换图片

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，使用 base64 传输图片文件可以节省一个 http 请求，图片的 base64 编码可以算是前端优化的一环

VUE Base64编码图片展示

<img :src="icon">
export default {
   data() {
      icon: 'data:image/png;base64,,XXXXX...',
   }
}

图片在线转换Base64：
http://imgbase64.duoshitong.com/

Base64编码转换图片

base64ImgtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}，
// base64编码的图片
var base64Img = 'data:image/png;base64,XXXXX...';
//转换图片文件
var imgFile = this.base64ImgtoFile(base64Img);

文件转换base64编码

<el-upload
         class="avatar-uploader"
         action=""
         ref="uploadAvatar"
         :show-file-list="false"
         :auto-upload="false"
         :on-change="changeFile">
     <img v-if="imageUrl" :src="imageUrl" class="uploadAvatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>

data() {
  return {
	imageUrl: '',
	imageBaseUrl: '',
  }
}
 /**
 * 文件框改变事件
 * @param file
 * @param fileList
 */
changeFile(file, fileList) {
    const isJPGORPNG = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
    const isLt1M = file.size / 1024 / 1024 < 1;

    if (!isJPGORPNG) {
        this.$message.info('上传头像图片只能是 JPG 或 PNG 格式!');
        return;
    }
    if (!isLt1M) {
        this.$message.info('上传头像图片大小不能超过 1MB!');
        return;
    }

    var This = this;
    var reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = function(e){
        this.result; //base64编码
        This.imageBaseUrl = this.result;
        This.imageUrl = this.result;