vant多图片压缩上传

在使用 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到1
          convertToWebp: 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属性是控制是否多图片上传

原文地址