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

网络编程 2024/11/27 佚名

3 2 1

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

一、工具类封装

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

**
 * 图片压缩工具类
 * 最大高度和最大宽度都为 500，如果超出大小将等比例缩放。
 *
 * 注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。
 */
// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
 let arr = urlData.split(',')
 let mime = arr[0].match(/:(.*"color: #ff0000">二、如何使用


将 CompressImageUtils 引入到目标文件，然后调用  compressImage 方法，即可在回调里获得压缩后的结果。注意  compressImage 方法返回的是 Promise。
省略其他无关代码，只保留跟压缩图片和上传相关的：




<template>
 <div>
  <van-uploader v-model="fileList" :after-read="afterRead" />
 </div>
</template>
<script>
 import {compressImage} from '../../utils/CompressImageUtils'
 export default {
  components: {},
  methods: {
   //读取完图片后
   afterRead(file) {
    console.log('afterRead------', file);
    this._compressAndUploadFile(file);
   },
   //压缩图片上传
   _compressAndUploadFile(file) {
    compressImage(file.content).then(result => {
     console.log('压缩后的结果', result); // result即为压缩后的结果
     console.log('压缩前大小', file.file.size);
     console.log('压缩后大小', result.size);
     if (result.size > file.file.size){
      console.log('上传原图');
      //压缩后比原来更大，则将原图上传
      this._uploadFile(file.file, file.file.name);
     } else {
      //压缩后比原来小，上传压缩后的
      console.log('上传压缩图');
      this._uploadFile(result, file.file.name)
     }
    })
   },
   //上传图片
   _uploadFile(file, filename) {
    let params = new FormData();
    params.append("file", file, filename);
    this.$api.uploadImage(params).then(res => {
     console.log('uploadImage', res);
   //上传成功，写自己的逻辑
    }).catch(err => {
     console.log('err', err);
    });
   }, 
  }
 }
</script>



在返回结果中加了层判断，压缩后比原来更大，则将原图上传；压缩后比原来小，上传压缩后的。解决压缩后比原图更大的情况。
this.$api.uploadImage(params) 是调用封装的 api 方法，如下：


//上传图片
 uploadImage(params){
  return axios.post(`${base}/api/v1/file`, params, {
   headers: {'content-type': 'multipart/form-data'}
  })
 },



三、使用效果


先上传一个非常大的，尺寸为 6016 × 4016，16.8M 的大图，看输出日志，压缩后大小仅为 260k 左右。此时判断压缩后比压缩前小，上传压缩图到服务器。


 
再看个尺寸 300 × 300，12k 的小图，压缩前大小是 11252，压缩后大小是 93656，大了很多。此时判断压缩后比压缩前更大，上传的是原图。


 
总结：这个工具类对大图的压缩效果很明显，不管多大的图，压缩之后基本不会超过 300k。但对某些小图可能出现压缩完反而更大的情况。在调用的地方加层压缩后和压缩前大小的比较判断，会完美解决这个问题。
当然也可以在工具类内部判断，但个人觉得跟业务逻辑相关的代码还是不要放在公用的工具类比较好。
总结
以上所述是小编给大家介绍的Vue 图片压缩并上传至服务器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！