vue element 项目 图片文件压缩上传模块开发 JavaScript

基于Vue和Element UI的图片文件压缩上传模块开发示例，它可以选择本地文件并将其压缩后上传到服务器。

创建一个Vue组件，例如 ImageUploader.vue，代码如下：

<template>
  <div>
    <el-upload
      ref="upload"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :action="uploadUrl"
      :headers="headers"
      :data="data"
      :on-success="onSuccess"
      :on-error="onError">
      <el-button size="small" type="primary">选择图片</el-button>
    </el-upload>
  </div>
</template>

<script>
import { Message } from 'element-ui';
export default {
  name: 'ImageUploader',
  props: {
    uploadUrl: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: {}
    },
    data: {
      type: Object,
      default: {}
    },
    maxSize: {
      type: Number,
      default: 2048 // 2MB
    },
    onSuccess: {
      type: Function,
      default: () => {}
    },
    onError: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
        if (!isJPG) {
          Message.error('上传图片只能是 JPG、PNG、GIF 格式!');
          return reject();
        }
        const size = file.size / 1024;
        if (size > this.maxSize) {
          Message.error(`上传图片大小不能超过 ${this.maxSize}KB!`);
          return reject();
        }
        this.compressImage(file).then(resolve).catch(reject);
      });
    },
    compressImage(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (event) => {
          const img = new Image();
          img.src = event.target.result;
          img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            canvas.toBlob((blob) => {
              const compressedFile = new File([blob], file.name, {
                type: file.type,
                lastModified: file.lastModified
              });
              resolve(compressedFile);
            }, file.type || 'image/png', 0.7);
          };
          img.onerror = reject;
        };
        reader.onerror = reject;
      });
    }
  }
};
</script>

这个组件使用了Element UI中的 el-upload 组件，可以用于选择文件并上传到服务器。组件具有以下属性：

• uploadUrl：上传文件的URL。
• headers：要附加到请求的HTTP标头。
• data：要与上传请求一起发送的额外数据。
• maxSize：允许上传的最大文件大小，以KB为单位。
• onSuccess：上传成功后调用的函数。
• onError：上传失败后调用的函数。

        在组件的方法中，我们使用 beforeUpload 函数来限制文件的类型和大小，并将其压缩为低质量的图像。compressImage 函数使用 canvas 元素来重新绘制压缩图像，并将其转换为 Blob 对象。然后，我们使用 File 对象创建一个新的压缩文件对象，并将其作为 Promise 的解决方案返回。

最后，将 ImageUploader 组件导入到你的Vue项目中，即可使用。

<template>
  <div>
    <ImageUploader
      ref="imageUploader"
      :uploadUrl="uploadUrl"
      :headers="headers"
      :data="data"
      :maxSize="maxSize"
      :onSuccess="onSuccess"
      :onError="onError"
    />
  </div>
</template>

<script>
import ImageUploader from '@/components/ImageUploader.vue';
export default {
  name: 'App',
  components: {
    ImageUploader
  },
  data() {
    return {
      uploadUrl: '/upload',
      headers: {
        Authorization: 'Bearer xxxxxxxx'
      },
      data: {
        userId: '123456'
      },
      maxSize: 2048 // 2MB
    };
  },
  methods: {
    onSuccess(response, file, fileList) {
      console.log('上传成功:', response);
    },
    onError(error, file, fileList) {
      console.error('上传失败:', error);
    }
  }
};
</script>

这是一个基本的示例，你可以根据你的需求来调整它。注意，这里的 uploadUrl 需要根据你的服务器端代码来调整。