前端jpg 转换为webp

原创于 2025-04-22 11:13:00 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

📘 Vue3 上传图片并转为 WebP 格式的实现笔记

✅ 场景：

上传商品图片，前端使用 <el-upload> 选择 .jpg/.png，并自动将其转为 .webp 格式再提交给后端。

📦 技术栈：

Vue3 + script setup
Element Plus 上传组件
FileReader & Canvas API 实现图片转码

📂 关键字段：

selectedFile：保存最终要上传的 WebP 格式图片。
formData.image：只是绑定用的，不直接上传图片。

🧩 核心逻辑步骤（handleFileChange）：

const handleFileChange = (file) => {
  const rawFile = file.raw; // 用户上传的原始文件
  selectedFile.value = rawFile;

  // 1. 校验格式
  if (!['image/jpeg', 'image/png'].includes(rawFile.type)) {
    ElMessage.error('只能上传 JPG 或 PNG 格式图片');
    return;
  }

  // 2. 使用 FileReader 读取图片数据
  const reader = new FileReader();
  reader.readAsDataURL(rawFile);

  reader.onload = () => {
    const img = new Image();
    img.src = reader.result;

    img.onload = () => {
      // 3. 将图片绘制到 canvas
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      // 4. 转换为 WebP 格式，压缩质量 1.0（可选范围 0~1）
      canvas.toBlob((blob) => {
        const webpFile = new File([blob], `${rawFile.name.split('.')[0]}.webp`, {
          type: 'image/webp'
        });
        selectedFile.value = webpFile;
        ElMessage.success('图片已转换为 WebP');
      }, "image/webp", 1.0);
    };
  };
};

🧾 表单提交逻辑（submitForm）：

const form = new FormData();
form.append("name", formData.name);
form.append("description", formData.description);
form.append("image", selectedFile.value); // 这里是 WebP 格式文件
form.append("category_array", JSON.stringify(formData.categoryArray));
form.append("category_text", formData.categoryText);

await requestUtil.post("product/add/", form, {
  headers: { "Content-Type": "multipart/form-data" }
});