使用 Element Plus 和 FileReader 实现图片上传预览

使用 Element Plus 和 FileReader 实现图片上传预览

在现代Web开发中，图片上传是一个常见的需求。很多时候，我们希望在图片上传到服务器之前，能够在客户端进行预览。这里，我们将使用Vue 3和Element Plus的<el-upload>组件结合FileReader API来实现这一功能。

1. 组件模板

首先，我们来看一下Vue组件的模板部分。这里使用了Element Plus的<el-upload>组件，并设置了几个关键的属性来控制上传行为：

<template>
  <div class="avatar-upload">
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :auto-upload="false"
      :before-upload="beforeAvatarUpload"
      :on-change="handleFileChange"
      :http-request="uploadImage"
    >
      <div v-if="previewUrl" class="avatar-preview">
        <img :src="previewUrl" class="avatar">
        <div class="mask">
          <el-icon><Edit /></el-icon>
        </div>
      </div>
      <el-icon v-else class="plus-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>

在这个模板中，<el-upload>组件的action属性被设置为空字符串，因为我们不希望在用户选择文件后立即自动上传到服务器。:auto-upload="false"确保了这个行为。:before-upload、:on-change和:http-request是三个重要的回调属性，它们分别用于文件上传前的检查、文件选择后的处理和自定义上传逻辑。

2. 组件逻辑

接下来，我们看一下组件的<script setup>部分：

<script setup>
import { ref } from 'vue';
import { Plus, Edit } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const previewUrl = ref('');

// 文件上传前的检查
const beforeAvatarUpload = (file) => {
  const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type);
  const isLt2M = file.size / 1024 / 1024 < 5;
  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG PNG GIF BMP 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 5MB!');
  }
  return isJPG && isLt2M;
};

// 文件选择后的处理
const handleFileChange = (file, fileList) => {
  if (!file.raw) {
    return;
  }
  const reader = new FileReader();
  reader.onload = (e) => {
    previewUrl.value = e.target.result;
  };
  reader.readAsDataURL(file.raw);
};

// 自定义上传逻辑
const uploadImage = async (params) => {
  try {
    // 这里假设有一个上传图片的API函数
    const res = await uploadEmployeeImage(params.file);
    ElMessage.success('上传成功');
    // 可以在这里处理上传成功后的逻辑，例如更新预览图或通知父组件
  } catch (error) {
    ElMessage.error('上传失败');
  }
};

// 假设的上传函数
async function uploadEmployeeImage(file) {
  // 实现上传逻辑
  // 这里返回模拟的上传结果
  return {
    data: {
      url: '模拟的图片URL'
    }
  };
}
</script>

在组件逻辑中，beforeAvatarUpload函数用于在文件上传前进行格式和大小的检查。handleFileChange函数用于处理文件选择事件，它使用FileReader来读取文件内容，并将其转换为DataURL，然后更新previewUrl的值以显示预览图。uploadImage函数是一个自定义的上传逻辑，它可以在这里调用实际的API来上传文件。

3. 知识点和对比

FileReader vs URL.createObjectURL

• FileReader：用于读取用户计算机上的文件内容，并可以将文件内容以不同格式（如文本、二进制数据、DataURL等）进行输出。它适用于需要读取文件内容并对其进行进一步处理的场景。
• URL.createObjectURL：用于创建一个表示File或Blob对象的URL，这个URL可以直接在<img>、<audio>或<video>等标签的src属性中使用，而无需等待文件内容被完全读取。它特别适合于大文件的即时预览或需要即时反馈的场景。

何时使用URL.createObjectURL？

• 大文件预览：当需要预览大文件（如高清图片、视频文件）时，使用URL.createObjectURL()可以更快地提供预览。
• 即时反馈：在需要即时反馈的场景中（如文件选择器选择文件后立即显示预览），URL.createObjectURL()也是一个好选择。
• 动态内容：如果你正在处理动态生成的内容（如通过JavaScript生成的图像或视频），并且希望立即在DOM中显示这些内容，URL.createObjectURL()可以帮助你实现。

总结

通过结合Element Plus的<el-upload>组件和FileReader API，我们可以轻松地在Vue 3项目中实现图片上传的预览功能。同时，了解FileReader和URL.createObjectURL的区别和适用场景，可以帮助我们在不同场景下做出更合适的选择。