js的input标签上传图片并转为base64预览

最新推荐文章于 2024-10-06 22:53:49 发布

Boale_H

最新推荐文章于 2024-10-06 22:53:49 发布

阅读量1.1k

点赞数

分类专栏：项目中实现的一些业务需求文章标签： javascript 前端开发语言

Edited by Boale_H （博哥的二进制世界）

本文链接：https://blog.csdn.net/Boale_H/article/details/130688291

版权

项目中实现的一些业务需求专栏收录该内容

40 篇文章 3 订阅

订阅专栏

文章讲述了在前端通过input标签选择图片后，如何利用JavaScript的FileReader接口将图片文件转换为base64字符串进行预览。代码示例中包含了对上传文件格式（JPG/PNG）和大小（5MB内）的检查，以及base64字符串的生成和预览图片的显示。

摘要由CSDN通过智能技术生成

js的input标签上传图片并转为base64预览

- 背景
- 解决办法

背景

input标签获取到的文件是属于file类型的，而前端如果想预览要上传的图片，就需要将file类型转为base64字符串

解决办法

<input type="file" accept="image/*" @change="beforeUpload">
<img :src="previewUrl" />

beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    console.log('请上传JPG或者PNG格式的图片');
    return false;
  }
  const isLt5M = file.size / 1024 / 1024 < 5;
  if (!isLt5M) {
    console.log('图片大小限制5M');
    return false;
  }
  
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    // 图片base64化
    const base64Str = e.target.result; // 转化后的base64字符串
    this.previewUrl = base64Str; // 预览图片的src路径,赋值为base64字符串
  };
  
  this.fileData = file;
}