【自己查阅】pc图片压缩实现

最新推荐文章于 2024-08-09 08:04:10 发布

呛csdn

最新推荐文章于 2024-08-09 08:04:10 发布

阅读量619

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/weixin_43941023/article/details/135474243

版权

本文描述了一名开发者在实现公司pc后台通用模板中图片上传压缩功能时遇到的问题，即压缩后的文件因格式验证失败无法上传。通过对比发现，压缩后的文件filename属性变为blob，导致格式判断错误。作者最终修复了这个问题，确保在上传时正确设置filename，以便后端接受压缩后的图片。

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

前言

公司pc后台通用模板需要实现图片上传压缩功能。由前端实现。
实现过程中遇到一些坑。
在此记录下，免得以后继续踩坑。

1、实现压缩

使用browser-image-compression包

安装

npm install browser-image-compression --save

使用

import imageCompression from 'browser-image-compression';
//压缩图片
async function handleImageUpload(event) {

  const imageFile = event.target.files[0];
  console.log(`原始大小 ${imageFile.size / 1024 / 1024} MB`);

  const options = {
    maxSizeMB: 1,//最大大小
    maxWidthOrHeight: 1920,//最大宽高
    useWebWorker: true,//是否用webworker
  }
  try {
    const compressedFile = await imageCompression(imageFile, options);
    console.log(`压缩后大小 ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

    await uploadToServer(compressedFile); // 这里就是自己上传服务器的逻辑。
  } catch (error) {
    console.log(error);
  }

}
//上传图片
function uploadToServer(file){
	 let data = new FormData();
     data.append("upload", file);
        axios({
            method: "POST",
            url: targeturl,
            data,
            headers: {
                "content-type": "multipart/form-data",
              Authorization: "Bearer " + localStorage.getItem("Admin-Token"),
            },
        }).then((res) => {
        })
}

2、遇到问题

遇到的问题是，压缩过后的文件，如果直接上传。后端那里会因为格式验证问题。一直通过不了。
一直提示我格式不正确。但我这里上传的图片格式明明后缀就是对的上的。

3.解决问题

我只能拿能上传的未压缩的文件和压缩过后上传文件的formData值进行比对

未压缩
在这里插入图片描述

压缩
在这里插入图片描述
基本一致。但是确实有一个地方不同。就是filename这里。
未压缩的filename是文件名称
压缩过后的filename是blob。
就是这个导致后端那里对文件格式的判断出了问题。
所以要在添加formData键值对的时候，再加一个对filename的设置。这样子就能上传了。

4.最终代码

import imageCompression from 'browser-image-compression';
//压缩图片
async function handleImageUpload(event) {

  const imageFile = event.target.files[0];
  console.log(`原始大小 ${imageFile.size / 1024 / 1024} MB`);

  const options = {
    maxSizeMB: 1,//最大大小
    maxWidthOrHeight: 1920,//最大宽高
    useWebWorker: true,//是否用webworker
  }
  try {
    const compressedFile = await imageCompression(imageFile, options);
    console.log(`压缩后大小 ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

    await uploadToServer(compressedFile); // 这里就是自己上传服务器的逻辑。
  } catch (error) {
    console.log(error);
  }

}
//上传图片
function uploadToServer(file){
	 let data = new FormData();
     data.append("upload", file,file.name);
        axios({
            method: "POST",
            url: targeturl,
            data,
            headers: {
                "content-type": "multipart/form-data",
              Authorization: "Bearer " + localStorage.getItem("Admin-Token"),
            },
        }).then((res) => {
        })
}