在使用 Vant 组件库进行多图片压缩上传的功能时，你可以结合使用 Vant 的 Uploader 组件和第三方 JavaScript 库（如 compressorjs）来实现。这里我将详细介绍如何实现这一功能。
步骤 1: 安装必要的库
npm install vant@next
npm install compressorjs
npm install axios步骤 2: 在你的 Vue 组件中引入 Vant 和 CompressorJS
import { Uploader } from 'vant';
import Compressor from 'compressorjs';
import 'vant/lib/index.css'; // 确保引入了 Vant 的 CSS步骤 3: 在 Vue 组件中使用
<template><van-uploader :after-read="handleAfterRead" multiple />
</template><script>
export default {methods: {async handleAfterRead(file) {const compressedFiles = [];for (let i = 0; i < file.length; i++) {new Compressor(file[i].file, {quality: 0.6, // 压缩质量，范围是0到1convertToWebp: false, // 是否转换为webp格式，根据需要设置success: (compressedResult) => {compressedFiles.push(compressedResult); // 将压缩后的文件添加到数组中if (compressedFiles.length === file.length) { // 确保所有文件都处理完毕后再进行下一步操作this.uploadImages(compressedFiles); // 上传压缩后的图片}},error(err) {console.error('压缩失败', err.message);},});}},uploadImages(files) {// 这里实现图片上传的逻辑，例如使用axios上传到服务器// 示例代码：// files.forEach(file => {// const formData = new FormData();// formData.append('image', file); // 根据后端接口要求修改字段名和文件添加方式// axios.post('你的上传接口地址', formData, {// headers: { 'Content-Type': 'multipart/form-data' }// }).then(response => {// console.log('上传成功', response);// }).catch(error => {// console.error('上传失败', error);// });// });}}
};
</script>注意：
1、文件上传要将headers的 'Content-Type'改为 'multipart/form-data' ，且后端也是用form-data接收
2、multiple属性是控制是否多图片上传
