前端使用Compressor.js实现图片压缩上传

// 引入Compressor.js库
import Compressor from 'compressorjs';
 
// 监听文件选择事件
document.getElementById('file-input').addEventListener('change', function(e) {
    // 获取文件对象
    const file = e.target.files[0];
 
    // 使用Compressor.js压缩图片
    new Compressor(file, {
        // 压缩配置
        quality: 0.6, // 压缩质量
        maxWidth: 1024, // 最大宽度
        maxHeight: 1024, // 最大高度
        success(result) {
            // 创建FormData对象用于构建表单数据集
            const formData = new FormData();
            formData.append('image', result); // 添加压缩后的文件到表单数据集
 
            // 使用AJAX上传图片
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload', true);
            xhr.send(formData);
        },
        error(err) {
            console.error('压缩失败:', err.message);
        },
    });
});

这段代码展示了如何使用Compressor.js库来监听文件输入，当用户选择图片文件后，使用Compressor.js压缩图片，并将压缩后的图片通过AJAX上传到服务器。