Vue 图片压缩并上传至服务器

最新推荐文章于 2025-03-21 11:55:20 发布

solocoder222

最新推荐文章于 2025-03-21 11:55:20 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： Vue 图片压缩图片上传

本文链接：https://blog.csdn.net/solocoder/article/details/103985580

版权

本文介绍如何在Vue项目中结合Vant库，实现图片选择、Canvas压缩，并上传到服务器。通过封装工具类，确保图片按比例压缩，解决大图上传问题。同时，针对压缩后图片可能增大的特殊情况，提供了判断和处理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要讲解基于 Vue + Vant ，实现移动端图片选择，并用 Canvas 压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。

一、工具类封装

废话不多说先上代码，封装一个 CompressImageUtils 工具类：

/**
 * 图片压缩工具类
 * 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。
 *
 * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。
 */

// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
   
  let arr = urlData.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)
  }
  return new Blob([u8arr], {
   type: mime})
}


// 压缩图片
export function compressImage(