vue如何上传大文件

Vue 上传大文件有以下几个关键步骤：1、分片上传，2、断点续传，3、进度显示，4、服务器端处理。 这些步骤可以确保大文件上传的稳定性和效率，避免因网络问题导致上传失败。接下来，我们将详细描述每一个步骤，并提供一些实际的代码示例和解释。

一、分片上传

分片上传是一种将大文件分成多个小块（片）进行上传的技术。每个小块独立上传，最终在服务器端重新组合成完整的文件。这种方式可以有效防止单次上传失败导致全部重传的问题。

步骤：

将文件分割成多个小块；
逐个上传每个小块；
在服务器端接收并保存每个小块；
上传完成后在服务器端合并所有小块。

代码示例：

methods: {
  async uploadFile(file) {
    const chunkSize = 5 * 1024 * 1024; // 5MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
      const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
      const formData = new FormData();
      formData.append('chunk', chunk);
      formData.append('chunkIndex', i);
      formData.append('totalChunks', totalChunks);
      await this.uploadChunk(formData);
    }
  },
  async uploadChunk(formData) {
    // 这里使用axios或者fetch进行上传
    await axios.post('/upload', formData);
  }
}

二、断点续传

断点续传是在上传过程中，如果上传中断（如网络问题、用户中止等），能够从中断的地方继续上传，而不是从头开始。这需要在客户端和服务器端都实现相应的逻辑。

步骤：

客户端记录已上传的块；
上传前检查已上传的块；
从未上传的块继续上传；
服务器端记录每个块的上传情况。

代码示例：

methods: {
  async uploadFile(file) {
    const uploadedChunks = await this.getUploadedChunks(file.name);
    const chunkSize = 5 * 1024 * 1024; // 5MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
      if (!uploadedChunks.includes(i)) {
        const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
        const formData = new FormData();
        formData.append('chunk', chunk);
        formData.append('chunkIndex', i);
        formData.append('totalChunks', totalChunks);
        formData.append('fileName', file.name);
        await this.uploadChunk(formData);
      }
    }
  },
  async getUploadedChunks(fileName) {
    const response = await axios.get(`/uploaded-chunks?fileName=${fileName}`);
    return response.data.uploadedChunks;
  },
  async uploadChunk(formData) {
    await axios.post('/upload', formData);
  }
}

三、进度显示

在上传大文件时，显示上传进度可以让用户了解上传的状态，提升用户体验。进度显示通常通过监听上传过程中的进度事件实现。

步骤：

在上传请求中添加进度监听；
更新进度状态并显示给用户。

代码示例：

data() {
  return {
    uploadProgress: 0
  };
},
methods: {
  async uploadFile(file) {
    const chunkSize = 5 * 1024 * 1024; // 5MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
      const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
      const formData = new FormData();
      formData.append('chunk', chunk);
      formData.append('chunkIndex', i);
      formData.append('totalChunks', totalChunks);
      await this.uploadChunk(formData, i, totalChunks);
    }
  },
  async uploadChunk(formData, chunkIndex, totalChunks) {
    await axios.post('/upload', formData, {
      onUploadProgress: progressEvent => {
        this.uploadProgress = Math.round((chunkIndex + progressEvent.loaded / progressEvent.total) / totalChunks * 100);
      }
    });
  }
}

四、服务器端处理

在服务器端，接收和处理分片上传的数据，并在所有分片上传完成后合并成完整的文件。服务器端处理需要考虑文件存储、分片合并、错误处理等。

步骤：

接收分片并存储；
记录已接收的分片；
检查所有分片是否上传完成；
合并所有分片成一个完整文件。

代码示例（Node.js）：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
app.post('/upload', (req, res) => {
  const chunk = req.files.chunk;
  const chunkIndex = req.body.chunkIndex;
  const totalChunks = req.body.totalChunks;
  const fileName = req.body.fileName;
  const chunkDir = path.join(__dirname, 'uploads', fileName);
  if (!fs.existsSync(chunkDir)) {
    fs.mkdirSync(chunkDir, { recursive: true });
  }
  const chunkPath = path.join(chunkDir, chunkIndex);
  chunk.mv(chunkPath, err => {
    if (err) return res.status(500).send(err);
    if (chunkIndex + 1 === totalChunks) {
      const fileWriteStream = fs.createWriteStream(path.join(__dirname, 'uploads', fileName));
      for (let i = 0; i < totalChunks; i++) {
        const chunkPath = path.join(chunkDir, i.toString());
        const chunkData = fs.readFileSync(chunkPath);
        fileWriteStream.write(chunkData);
        fs.unlinkSync(chunkPath);
      }
      fileWriteStream.end();
      fs.rmdirSync(chunkDir);
    }
    res.send('Chunk uploaded');
  });
});
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

总结：通过以上步骤和代码示例，我们实现了在Vue环境下大文件的分片上传、断点续传以及进度显示。同时，服务器端的处理逻辑也确保了分片数据的正确接收和合并。建议在实际项目中，根据具体需求和环境进一步优化和扩展这些代码，例如增加错误处理、性能优化等。

vue如何上传大文件

一、分片上传

二、断点续传

三、进度显示

四、服务器端处理

相关问答FAQs：

发表回复