jsのinputタグで画像をアップロードし、プレビュー用にbase64に変換します。

バックグラウンド

input タグによって取得されたファイルはファイル タイプに属しており、フロント エンドがアップロードする画像をプレビューしたい場合は、ファイル タイプを 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;
}