当前位置：首页 > VUE

vue实现压缩上传文件

2026-01-07 02:34:15VUE

压缩上传文件的实现方法

在Vue中实现文件压缩和上传功能，可以通过以下步骤完成。该方法结合了前端文件压缩库和HTTP请求，确保文件在上传前被有效压缩。

安装必要的依赖

需要使用compressorjs库进行文件压缩，以及axios或其他HTTP客户端库进行文件上传。

npm install compressorjs axios

创建文件上传组件

在Vue组件中，创建一个文件输入元素，并监听其change事件以处理文件选择和压缩。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

实现文件压缩逻辑

在handleFileChange方法中，使用compressorjs对选中的文件进行压缩。可以设置压缩质量、宽度、高度等参数。

import Compressor from 'compressorjs';

export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      new Compressor(file, {
        quality: 0.6,
        success(result) {
          const compressedFile = new File([result], file.name, {
            type: result.type,
          });
          this.compressedFile = compressedFile;
        }.bind(this),
        error(err) {
          console.error('压缩失败:', err);
        },
      });
    },
  },
};

实现文件上传逻辑

在uploadFile方法中，使用axios将压缩后的文件上传到服务器。可以通过FormData对象包装文件数据。

import axios from 'axios';

export default {
  data() {
    return {
      compressedFile: null,
    };
  },
  methods: {
    uploadFile() {
      if (!this.compressedFile) {
        console.error('没有可上传的文件');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.compressedFile);

      axios.post('https://your-api-endpoint.com/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        console.log('上传成功:', response.data);
      })
      .catch(error => {
        console.error('上传失败:', error);
      });
    },
  },
};

添加进度提示

为了提升用户体验，可以添加上传进度提示。axios提供了onUploadProgress回调函数来跟踪上传进度。

axios.post('https://your-api-endpoint.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress(progressEvent) {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percentCompleted}%`);
  },
})

处理多文件上传

如果需要支持多文件上传，可以修改文件选择逻辑，遍历文件列表并逐个压缩。

handleFileChange(event) {
  const files = event.target.files;
  Array.from(files).forEach(file => {
    new Compressor(file, {
      quality: 0.6,
      success(result) {
        const compressedFile = new File([result], file.name, {
          type: result.type,
        });
        this.compressedFiles.push(compressedFile);
      }.bind(this),
    });
  });
}