vue 图片上传压缩

vue图片上传压缩可以通过以下步骤实现。首先，安装依赖包image-conversion。然后，引入image-conversion库到你的页面中。最后，使用image-conversion库进行图片压缩。

具体的步骤如下：
1. 使用npm安装image-conversion依赖：npm i image-conversion。
2. 在你的vue页面中引入image-conversion库：import * as imageConversion from 'image-conversion'。
3. 使用image-conversion库对图片进行压缩。

相关问题

vue 图片压缩上传

Vue中实现图片压缩上传的方法如下：
1.引入插件：首先需要引入一个图片压缩上传的插件，例如`vue-image-compressor`。
2.安装插件：使用npm或yarn安装插件，命令如下：

npm install vue-image-compressor

或

yarn add vue-image-compressor

3.导入插件：在需要使用的组件中导入插件，并注册到Vue实例中，示例代码如下：

import Vue from 'vue'
import VueImageCompressor from 'vue-image-compressor'

Vue.use(VueImageCompressor)

4.编写模板代码：在组件模板中添加一个文件上传按钮，并绑定一个`@change`事件来处理文件选择，示例代码如下：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

5.编写处理方法：在组件的`methods`选项中编写处理文件上传的方法，首先获取选择的文件，然后使用插件提供的压缩方法进行压缩，最后使用压缩后的图片进行上传，示例代码如下：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    this.$compressImage(file, {
      quality: 0.6, // 压缩质量，范围为0到1（可选，默认为0.6）
      maxWidth: 800, // 最大宽度（可选，默认为800）
      maxHeight: 800 // 最大高度（可选，默认为800）
    })
      .then(compressedImage => {
        // 进行图片上传逻辑
      })
      .catch(error => {
        // 处理压缩失败的情况
      })
  }
}

在上述代码中，通过`this.$compressImage`来调用插件提供的压缩方法，传入的参数为选择的文件和一些可选的压缩参数。压缩成功后，会返回一个压缩后的图片，可以将其直接上传到服务器，或者进行其他的操作。

通过以上步骤，在Vue中实现了图片压缩上传的功能。注意，使用插件的具体使用方法可能会根据插件的不同而有所不同，请根据实际情况进行相应的调整。

VUE VANT上传图片 压缩

在Vue前端开发中，可以使用Vant组件库中的Uploader组件来实现图片上传功能。同时，为了减小上传文件的大小，可以使用JavaScript中的canvas API对图片进行压缩处理。具体步骤如下：
1. 在Vue项目中引入Vant组件库和exif-js库。
2. 在Uploader组件中设置上传图片的最大尺寸和格式。
3. 在上传前，使用exif-js库获取图片的方向参数，并根据方向参数对图片进行旋转。
4. 使用canvas API对图片进行压缩处理，并将压缩后的图片上传至服务器。

代码示例：

<template>
  <van-uploader
    :max-size="2 * 1024 * 1024"
    :accept="['jpg', 'jpeg', 'png']"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
  />
</template>

<script>
import EXIF from 'exif-js';
import { Toast } from 'vant';

export default {
  methods: {
    beforeUpload(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');
            let width = img.width;
            let height = img.height;
            let orientation = 1;
            EXIF.getData(file, function() {
              orientation = EXIF.getTag(this, 'Orientation');
            });
            if ([5, 6, 7, 8].indexOf(orientation) > -1) {
              canvas.width = height;
              canvas.height = width;
            } else {
              canvas.width = width;
              canvas.height = height;
            }
            switch (orientation) {
              case 2:
                ctx.transform(-1, 0, 0, 1, width, 0);
                break;
              case 3:
                ctx.transform(-1, 0, 0, -1, width, height);
                break;
              case 4:
                ctx.transform(1, 0, 0, -1, 0, height);
                break;
              case 5:
                ctx.transform(0, 1, 1, 0, 0, 0);
                break;
              case 6:
                ctx.transform(0, 1, -1, 0, height, 0);
                break;
              case 7:
                ctx.transform(0, -1, -1, 0, height, width);
                break;
              case 8:
                ctx.transform(0, -1, 1, 0, 0, width);
                break;
              default:
                break;
            }
            ctx.drawImage(img, 0, 0, width, height);
            const base64 = canvas.toDataURL('image/jpeg', 0.8);
            const blob = this.dataURLtoBlob(base64);
            resolve(blob);
          };
        };
      });
    },
    onSuccess(response) {
      Toast.success('上传成功');
    },
    dataURLtoBlob(dataURL) {
      const arr = dataURL.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  },
};
</script>