vue：前端压缩图片上传

最新推荐文章于 2024-09-19 14:21:23 发布

Jay丶萧邦

最新推荐文章于 2024-09-19 14:21:23 发布

阅读量1.2k

点赞数 1

分类专栏： web前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_42543244/article/details/122579568

版权

web前端专栏收录该内容

37 篇文章 2 订阅

订阅专栏

本文介绍了一个Vue项目中使用的图片压缩功能实现方法。通过一个自定义的compressImage.js文件，可以实现选择图片后对其进行压缩，并预览压缩后的效果。此方法使用了FileReader API和Canvas API来读取和压缩图片。

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

网上关于vue前端压缩图片后再上传到的代码很多，大家可以一试~

compressImage.js文件

// 压缩图片
export function compressImage({ file, config = {}, fileName }) {
    const read = new FileReader()
    read.readAsDataURL(file)
    return new Promise(function (resolve) {
        read.onload = function (e) {
            let img = new Image()
            img.src = e.target.result
            img.onload = function () {
                // 默认按比例压缩
                let w = config.width || img.width
                let h = config.height || img.height
                // 生成canvas
                let canvas = document.createElement('canvas')
                let ctx = canvas.getContext('2d')
                let base64
                // 创建属性节点
                canvas.setAttribute('width', w)
                canvas.setAttribute('height', h)
                ctx.drawImage(this, 0, 0, w, h)
                base64 = canvas.toDataURL(file['type'], config.quality || 0.5)
                let finalFile = dataURLtoFile(base64, fileName)
                let fileBinary = dataURLtoBlob(base64, fileName)
                resolve({ finalFile, fileBinary })
            }
        }
    })
}
// 将base64转为二进制
function dataURLtoBlob(dataurl, fileName) {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    let blobObj = new Blob([u8arr], { type: mime })
    return {
        fileName,
        blobUrl: URL.createObjectURL(blobObj)
    }
}

// 将base64编码转回file文件  
function dataURLtoFile(dataurl, fileName) {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    let file = new File([u8arr], { type: mime })
    return {
        fileName,
        file
    }
}

页面调用

<template>
  <div>
    <el-upload
      action="#"
      multiple
      accept="image/jpg,image/jpeg,image/png"
      list-type="picture-card"
      :on-change="fileChange"
      :auto-upload="false"
    >
    </el-upload>
    <el-button type="primary" @click="compressFile">压缩</el-button>
    <div>
      <el-image
        v-for="(item, index) in imageList"
        :key="index"
        fit="cover"
        style="width: 300px; height: 300px"
        :src="item.fileBinary.blobUrl"
        :preview-src-list="srcList"
      ></el-image>
    </div>
  </div>
</template>

<script>
import { compressImage } from "./compressImage";
export default {
  data() {
    return {
      fileList: [],
      imageList: [],
      srcList: [],
    };
  },
  methods: {
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    compressFile() {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      this.fileList.forEach(async (item) => {
        console.log("原图size===>", item.size);
        let result = await compressImage({
          file: item.raw,
          config,
          fileName: item.name,
        });
        console.log("压缩后图片size===>", result.finalFile.file.size);
        this.imageList.push(result);
        this.srcList.push(result.fileBinary.blobUrl);
      });
      console.log("压缩后图片===>", this.imageList);
    },
  },
};
</script>

演示结果