发布于 由admin

在一个 Vue 应用中，如何实现一个通用的文件上传组件，支持文件分片上传、断点续传和预览功能？

各位靓仔靓女，早上好啊！今天咱们来聊聊Vue里如何打造一个超级实用的文件上传组件，让你的文件上传体验直接起飞！

开场白：文件上传，烦恼多多？

文件上传，听起来简单，但一不小心就会变成一个令人头大的问题。大文件传不上去？网络不稳定导致上传中断？用户体验糟糕透顶？别担心，今天咱们就来一起解决这些难题，打造一个稳定、高效、用户体验一流的Vue文件上传组件。

第一章：组件的基本结构与初始化

首先，我们需要搭建一个基础的Vue组件骨架。

<template>
  <div class="upload-container">
    <input type="file" @change="handleFileChange" ref="fileInput" />
    <button @click="uploadFile">开始上传</button>
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
    <div class="preview" v-if="previewUrl">
      <img :src="previewUrl" alt="文件预览" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024 * 2, // 2MB，分片大小可以根据实际情况调整
      progress: 0,
      uploadUrl: '/api/upload', // 替换为你的上传接口
      previewUrl: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.previewFile();
    },
    uploadFile() {
      if (!this.file) {
        alert('请选择文件');
        return;
      }
      this.sliceAndUpload();
    },
    previewFile() {
      if (this.file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewUrl = e.target.result;
        };
        reader.readAsDataURL(this.file);
      }
    },
  },
};
</script>

<style scoped>
.upload-container {
  /* 添加你的样式 */
}
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: green;
    width: 0%;
}

.preview img {
    max-width: 200px;
    max-height: 200px;
}
</style>

这个组件包含：

  • 一个文件选择input (<input type="file">)，用于选择文件。
  • 一个上传按钮 (<button>)，触发上传操作。
  • 一个进度条 (<div class="progress-bar">)，显示上传进度。
  • 一个预览区域 (<div class="preview">)，用于预览图片等文件。

第二章：文件分片的核心原理

为啥要分片？因为大文件一次性上传容易失败，分成小块上传可以提高成功率，并且方便断点续传。

sliceAndUpload() {
  const file = this.file;
  const chunkSize = this.chunkSize;
  const totalSize = file.size;
  let start = 0;
  let end = chunkSize;
  let chunkIndex = 0;

  while (start < totalSize) {
    const chunk = file.slice(start, end);
    this.uploadChunk(chunk, chunkIndex, totalSize);
    start = end;
    end = start + chunkSize;
    chunkIndex++;
  }
},

这段代码将文件分割成多个chunk，然后逐个上传。file.slice()方法是关键，它可以截取文件的一部分。

第三章：实现断点续传

断点续传是指在上传中断后，可以从上次上传的位置继续上传，而不是重新上传整个文件。 核心思路：记录已经上传的分片信息。

async uploadChunk(chunk, chunkIndex, totalSize) {
  const formData = new FormData();
  formData.append('file', chunk);
  formData.append('chunkIndex', chunkIndex);
  formData.append('totalChunks', Math.ceil(totalSize / this.chunkSize));
  formData.append('filename', this.file.name); // 确保后端知道文件名

  try {
    const response = await fetch(this.uploadUrl, {
      method: 'POST',
      body: formData,
    });

    const data = await response.json();

    if (data.success) {
      // 更新进度
      this.progress = Math.min(((chunkIndex + 1) * this.chunkSize) / totalSize * 100, 100);
      if (this.progress === 100) {
        alert('上传完成');
      }
    } else {
      console.error('分片上传失败:', data.message);
      // 重新上传该分片，或者提示用户稍后重试
    }
  } catch (error) {
    console.error('上传出错:', error);
    // 处理错误，例如重新上传该分片
  }
},

后端逻辑 (伪代码，需要根据你的实际后端框架调整):

# Python (Flask) 示例
from flask import Flask, request, jsonify
import os

app = Flask(__name__)

UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

@app.route('/api/upload', methods=['POST'])
def upload():
    file = request.files['file']
    chunk_index = int(request.form['chunkIndex'])
    total_chunks = int(request.form['totalChunks'])
    filename = request.form['filename']
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename + '.part' + str(chunk_index)) # 临时文件

    file.save(filepath)

    # 检查是否所有分片都已上传
    uploaded_chunks = [f for f in os.listdir(app.config['UPLOAD_FOLDER']) if f.startswith(filename + '.part')]
    if len(uploaded_chunks) == total_chunks:
        # 合并分片
        with open(os.path.join(app.config['UPLOAD_FOLDER'], filename), 'wb') as final_file:
            for i in range(total_chunks):
                part_filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename + '.part' + str(i))
                with open(part_filepath, 'rb') as part_file:
                    final_file.write(part_file.read())
                os.remove(part_filepath) # 删除临时分片文件

        return jsonify({'success': True, 'message': '文件上传完成'})

    return jsonify({'success': True, 'message': '分片上传成功'})

if __name__ == '__main__':
    app.run(debug=True)

关键点：

  • chunkIndex: 告诉后端这是第几个分片。
  • totalChunks: 告诉后端总共有多少个分片。
  • 文件名: 确保后端知道上传的文件名。
  • 后端存储: 后端接收到分片后，需要按照chunkIndex的顺序保存分片，并在所有分片上传完成后，合并成完整的文件。
  • 临时文件: 将每个分片先保存为临时文件，比如filename.part0，filename.part1等等。
  • 合并文件: 当所有分片都上传完毕后，按照编号顺序读取临时文件，合并成最终的文件。

第四章：优化用户体验

  • 实时进度显示: 使用progress数据属性，动态更新进度条的宽度。
  • 上传状态提示: 在上传过程中，显示"上传中…"、"上传成功"、"上传失败"等提示信息。
  • 错误处理: 当上传失败时，给出明确的错误提示，并提供重试按钮。
  • 文件预览: 对于图片等可以直接预览的文件，显示预览图。
  • 取消上传: 提供一个取消上传的按钮，允许用户中断上传过程。

第五章：关于断点续传的进一步思考

上面的代码实现了一个简单的分片上传，但是要实现真正的断点续传，还需要做更多的工作。

  • 后端需要记录已上传的分片信息: 可以使用数据库或者Redis等缓存来记录哪些分片已经上传成功。
  • 前端在开始上传前，先向后端查询已上传的分片信息: 如果已经上传了一部分分片，则跳过这些分片，直接上传剩余的分片。
  • 处理上传中断的情况: 当上传中断时，前端需要保存当前上传的状态，例如已经上传的分片数量、上传的起始位置等。下次上传时，从保存的状态恢复上传。

一个更完善的断点续传流程如下：

  1. 前端： 选择文件后，计算文件大小，分片数量等信息。
  2. 前端： 向后端发送请求，查询该文件是否已经上传过部分分片。
  3. 后端： 查找是否存在该文件的上传记录。如果存在，返回已上传的分片列表。如果不存在，则创建一个新的上传记录。
  4. 前端： 根据后端返回的已上传分片列表，跳过已经上传的分片，上传剩余的分片。
  5. 后端： 接收到分片后，将分片保存到临时文件，并更新上传记录。
  6. 前端： 上传完成后，通知后端合并分片。
  7. 后端： 合并分片，删除临时文件，完成上传。

第六章：代码优化与封装

  • 将上传逻辑封装成一个独立的函数或模块: 方便复用和测试。
  • 使用async/await简化异步操作: 使代码更易读。
  • 使用try/catch处理错误: 保证代码的健壮性。
  • 添加注释: 方便理解和维护。
  • 使用Vuex管理上传状态: 方便在多个组件之间共享上传状态。

第七章：安全注意事项

  • 文件类型验证: 在前端和后端都要对上传的文件类型进行验证，防止上传恶意文件。
  • 文件大小限制: 限制上传的文件大小，防止服务器资源被耗尽。
  • 文件名处理: 对上传的文件名进行处理，防止文件名包含特殊字符导致安全问题。
  • 存储位置安全: 确保上传的文件存储在安全的位置，防止被非法访问。
  • 防止CSRF攻击: 在上传接口中添加CSRF token验证，防止CSRF攻击。

第八章：前端代码示例 (包含断点续传逻辑)

<template>
  <div class="upload-container">
    <input type="file" @change="handleFileChange" ref="fileInput" />
    <button @click="uploadFile" :disabled="uploading">
      {{ uploading ? '上传中...' : '开始上传' }}
    </button>
    <div class="progress-bar">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
    <div class="preview" v-if="previewUrl">
      <img :src="previewUrl" alt="文件预览" />
    </div>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<script>
import axios from 'axios'; // 引入 axios (你需要安装它: npm install axios)

export default {
  name: 'FileUpload',
  data() {
    return {
      file: null,
      chunkSize: 1024 * 1024 * 2, // 2MB
      progress: 0,
      uploadUrl: '/api/upload', // 上传接口
      checkUrl: '/api/check-upload', // 检查已上传分片接口
      previewUrl: null,
      uploading: false,
      uploadedChunks: [],
      error: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
      this.previewFile();
      this.error = null;
    },
    async uploadFile() {
      if (!this.file) {
        this.error = '请选择文件';
        return;
      }
      this.uploading = true;
      this.progress = 0;
      this.error = null;

      try {
        await this.checkAndUpload();
      } catch (err) {
        this.error = '上传失败: ' + err.message;
        console.error(err);
      } finally {
        this.uploading = false;
      }
    },
    previewFile() {
      if (this.file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewUrl = e.target.result;
        };
        reader.readAsDataURL(this.file);
      }
    },
    async checkAndUpload() {
      try {
        const checkResponse = await axios.post(this.checkUrl, {
          filename: this.file.name,
          totalSize: this.file.size,
        });

        this.uploadedChunks = checkResponse.data.uploadedChunks || [];
        this.sliceAndUpload();
      } catch (error) {
        console.error('检查上传状态失败:', error);
        throw new Error('检查上传状态失败');
      }
    },

    sliceAndUpload() {
      const file = this.file;
      const chunkSize = this.chunkSize;
      const totalSize = file.size;
      const totalChunks = Math.ceil(totalSize / chunkSize);
      let chunkIndex = 0;

      const uploadPromises = [];

      while (chunkIndex < totalChunks) {
        if (this.uploadedChunks.includes(chunkIndex)) {
          // 该分片已经上传，跳过
          this.progress = Math.min(((chunkIndex + 1) * chunkSize) / totalSize * 100, 100); // 更新进度
          chunkIndex++;
          continue;
        }

        const start = chunkIndex * chunkSize;
        const end = Math.min(start + chunkSize, totalSize);
        const chunk = file.slice(start, end);

        uploadPromises.push(this.uploadChunk(chunk, chunkIndex, totalChunks, file.name));
        chunkIndex++;
      }

      Promise.all(uploadPromises)
        .then(() => {
          alert('上传完成');
          this.progress = 100;
        })
        .catch((error) => {
          console.error('上传失败:', error);
          this.error = '上传失败: ' + error.message;
        });
    },

    async uploadChunk(chunk, chunkIndex, totalChunks, filename) {
      const formData = new FormData();
      formData.append('file', chunk);
      formData.append('chunkIndex', chunkIndex);
      formData.append('totalChunks', totalChunks);
      formData.append('filename', filename);

      try {
        const response = await axios.post(this.uploadUrl, formData, {
          onUploadProgress: (progressEvent) => {
            // 计算单个分片的上传进度，并累加到总进度中
            const chunkProgress = progressEvent.loaded / progressEvent.total;
            const totalUploadedSize = (chunkIndex * this.chunkSize) + (chunkProgress * chunk.size);
            this.progress = Math.min((totalUploadedSize / this.file.size) * 100, 100);
          },
        });

        if (response.data.success) {
          return Promise.resolve(); // 上传成功
        } else {
          console.error('分片上传失败:', response.data.message);
          return Promise.reject(new Error(response.data.message)); // 上传失败
        }
      } catch (error) {
        console.error('上传出错:', error);
        return Promise.reject(error); // 上传出错
      }
    },
  },
};
</script>

<style scoped>
/* 样式保持不变 */
.upload-container {
  /* 添加你的样式 */
}
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    margin-top: 10px;
}

.progress {
    height: 10px;
    background-color: green;
    width: 0%;
}

.preview img {
    max-width: 200px;
    max-height: 200px;
}

.error-message {
  color: red;
  margin-top: 10px;
}
</style>

对应的后端 (Node.js + Express + Multer 示例，需要安装 express 和 multer)

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000;

app.use(express.json()); // 用于解析 JSON 格式的请求体
app.use(express.urlencoded({ extended: true })); // 用于解析 URL 编码的请求体

const UPLOAD_FOLDER = path.join(__dirname, 'uploads');
fs.mkdirSync(UPLOAD_FOLDER, { recursive: true }); // 确保 uploads 文件夹存在

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, UPLOAD_FOLDER);
  },
  filename: (req, file, cb) => {
    const filename = file.originalname;
    const chunkIndex = req.body.chunkIndex;
    cb(null, `${filename}.part${chunkIndex}`); // 分片文件名
  },
});

const upload = multer({ storage: storage });

// 检查已上传分片的接口
app.post('/api/check-upload', (req, res) => {
  const filename = req.body.filename;
  const totalSize = req.body.totalSize;

  const uploadedChunks = [];
  fs.readdirSync(UPLOAD_FOLDER).forEach(file => {
    if (file.startsWith(filename + '.part')) {
      const chunkIndex = parseInt(file.replace(filename + '.part', ''));
      if (!isNaN(chunkIndex)) {
        uploadedChunks.push(chunkIndex);
      }
    }
  });

  res.json({ uploadedChunks });
});

// 上传分片的接口
app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log('Uploading chunk:', req.body.chunkIndex, 'filename:', req.body.filename);
  const filename = req.body.filename;
  const totalChunks = parseInt(req.body.totalChunks);
  const chunkIndex = parseInt(req.body.chunkIndex);

  const uploadedChunks = [];
  fs.readdirSync(UPLOAD_FOLDER).forEach(file => {
    if (file.startsWith(filename + '.part')) {
      const chunkIndexFromFile = parseInt(file.replace(filename + '.part', ''));
        if (!isNaN(chunkIndexFromFile)) {
            uploadedChunks.push(chunkIndexFromFile);
        }

    }
  });
  uploadedChunks.push(chunkIndex);

  if (uploadedChunks.length === totalChunks) {
    // 所有分片都已上传，合并分片
    const finalFilePath = path.join(UPLOAD_FOLDER, filename);
    const writeStream = fs.createWriteStream(finalFilePath);

    for (let i = 0; i < totalChunks; i++) {
      const partFilePath = path.join(UPLOAD_FOLDER, `${filename}.part${i}`);
      const readStream = fs.createReadStream(partFilePath);
      readStream.pipe(writeStream, { end: false }); // 不要关闭 writeStream 直到所有分片都写入

      readStream.on('end', () => {
        fs.unlinkSync(partFilePath); // 删除已合并的分片文件
      });
    }

    writeStream.on('finish', () => {
      console.log('File merged successfully:', filename);
      res.json({ success: true, message: '文件上传完成' });
    });
    writeStream.on('error', (err) => {
        console.error("File merge error", err);
        res.status(500).json({ success: false, message: '文件合并失败' });
    });

  } else {
    res.json({ success: true, message: '分片上传成功' });
  }
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

需要注意的点:

  • 你需要安装 axios (前端) 和 express, multer (后端): npm install axios express multer
  • 这个示例使用了 multer 中间件来处理文件上传，你需要配置 destination 和 filename 函数来指定上传文件的存储位置和文件名。
  • /api/check-upload 接口用于检查已经上传的分片，返回一个已上传分片索引的数组。
  • /api/upload 接口用于接收分片，并将分片保存到服务器。当所有分片都上传完毕后，将分片合并成最终的文件。
  • 前端代码中添加了axios的onUploadProgress用于更加精确的计算上传进度。

总结：

打造一个优秀的文件上传组件需要考虑很多方面，包括分片上传、断点续传、用户体验和安全性。希望通过今天的讲解，大家能够掌握文件上传的核心原理，并能够根据自己的实际需求，打造出更加完善的文件上传组件。记住，多实践，多思考，你也能成为文件上传专家！

今天的分享就到这里，谢谢大家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注