el-upload上传的图片进行压缩

最新推荐文章于 2024-05-23 18:32:34 发布

进阶的巨人001

最新推荐文章于 2024-05-23 18:32:34 发布

阅读量292

点赞数 4

本文链接：https://blog.csdn.net/weixin_45389051/article/details/136631509

版权

本文介绍了如何在前端使用Vue.js中的ElementUI组件`el-upload`实现文件上传前，进行图片格式检查和压缩的JavaScript代码，确保上传的是JPEG、GIF、JPG等格式的图片并限制大小。

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

直接上代码

<el-upload
  :before-upload="onBeforeUpload"
>

js

 onBeforeUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/GIF" ||
        file.type === "image/JPG" ||
        file.type === "image/bmp";
      if (!isJPG) {
        this.$message.error("图片格式不正确!");
        return false;
      }
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          const img = new Image();
          img.src = e.target.result;
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 110; // 设置压缩后图片的宽度
            canvas.height = 110; // 根据原始图片比例计算压缩后图片的高度
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            canvas.toBlob((blob) => {
              const compressedFile = new File([blob], file.name, { type: file.type, lastModified: Date.now() });
              resolve(compressedFile);
            }, file.type);
          };
        };
      });
    },