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