vue base64图片压缩

在Vue中进行base64图片压缩有多种方式可以实现。一种常见的方式是使用HTML的input标签来选择图片文件，然后在Vue的methods中编写处理函数来实现压缩。具体代码可以如下所示：

<template>
  <input type="file" :value="imgValue" class="uploadInput" accept="image/*" @change="uploadImg($event)" />
</template>

<script>
export default {
  data() {
    return {
      imgValue: '', // 存储选择的图片文件
    };
  },
  methods: {
    async uploadImg(event) {
      const file = event.target.files

相关问题

vue base64字符串过长

如果Vue项目中的Base64字符串过长，可能会导致篇幅过长或页面加载缓慢的问题。为了解决这个问题，可以尝试以下方法：

1. 使用图片链接：不直接将图片转为Base64字符串，而是将图片上传至服务器并获取图片链接，然后将链接插入到Vue项目中。这样可以减小页面大小和加载时间。

2. 压缩图片：使用图片压缩工具，将图片的质量进行适当压缩，以减小图片的大小。可以使用一些开源的图片压缩库或在线图片压缩工具来实现。

3. 按需加载：将页面中的图片进行按需加载，当用户需要查看或使用图片时再进行加载。可以使用Vue的懒加载插件来实现图片的延迟加载，从而提高页面加载速度。

4. 分割内容：如果页面中包含大量的Base64图片，可以将内容进行分割，将图片部分放在不同的组件中，只在需要显示的时候再进行加载。这样可以提高页面的渲染速度。

综上所述，通过使用图片链接、压缩图片、按需加载和分割内容等方法，可以有效解决Vue项目中Base64字符串过长的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue项目base64字符串转图片的实现代码](https://download.csdn.net/download/weixin_38646902/12955514)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题](https://download.csdn.net/download/weixin_38720653/12953725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [ruoyi-vue-pro yudao 项目报表设计器 积木报表模块启用及相关SQL脚本](https://download.csdn.net/download/zengwenbo225566/88234865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

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>