当前位置：首页 > VUE

vue实现压缩上传文件

2026-03-26 23:19:01VUE

压缩上传文件的实现方法

使用 Vue 结合第三方库（如 compressorjs 和 axios）可以轻松实现文件压缩和上传功能。

安装依赖

确保项目中已安装 compressorjs 和 axios：

npm install compressorjs axios

文件压缩与上传组件

创建一个 Vue 组件，包含文件选择和压缩上传逻辑：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <button @click="uploadFile" :disabled="!file">上传</button>
    <p v-if="progress">{{ progress }}</p>
  </div>
</template>

<script>
import Compressor from 'compressorjs';
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      compressedFile: null,
      progress: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.compressFile();
    },
    compressFile() {
      if (!this.file) return;

      new Compressor(this.file, {
        quality: 0.6,
        success: (result) => {
          this.compressedFile = result;
        },
        error: (err) => {
          console.error('压缩失败:', err);
        }
      });
    },
    uploadFile() {
      if (!this.compressedFile) return;

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

      axios.post('/api/upload', formData, {
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          this.progress = `上传进度: ${percentCompleted}%`;
        }
      }).then(response => {
        console.log('上传成功:', response.data);
      }).catch(error => {
        console.error('上传失败:', error);
      });
    }
  }
};
</script>

后端接口处理

Node.js 示例（使用 Express 和 multer 中间件）：

vue实现压缩上传文件

const express = require('express');
const multer = require('multer');
const app = express();

const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({ message: '文件上传成功', file: req.file });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});