vue实现批量上传

2026-01-17 15:28:49VUE

Vue 实现批量上传的方法

使用 `<input type="file">` 和 `multiple` 属性

在 Vue 模板中添加一个文件输入框，设置 multiple 属性以允许选择多个文件。通过 @change 事件监听文件选择。

<template>
  <input type="file" multiple @change="handleFileChange" />
</template>

在方法中处理文件选择事件，获取选中的文件列表并上传。

methods: {
  handleFileChange(event) {
    const files = event.target.files;
    if (files.length === 0) return;

    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('files[]', files[i]);
    }

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

使用第三方库（如 `vue-upload-component`）

安装 vue-upload-component 库，可以更方便地实现批量上传功能。

npm install vue-upload-component

在 Vue 组件中引入并使用该库。

<template>
  <file-upload
    multiple
    :post-action="'/upload'"
    @input-file="handleFileChange"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component';

export default {
  components: { FileUpload },
  methods: {
    handleFileChange(newFiles, oldFiles) {
      console.log('新文件:', newFiles);
      console.log('旧文件:', oldFiles);
    }
  }
};
</script>

分片上传大文件

对于大文件，可以使用分片上传以提高上传效率和稳定性。以下是一个简单的分片上传实现。

methods: {
  async uploadChunks(file) {
    const chunkSize = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    const uploadId = Date.now().toString();

    for (let i = 0; i < totalChunks; i++) {
      const start = i * chunkSize;
      const end = Math.min(start + chunkSize, file.size);
      const chunk = file.slice(start, end);

      const formData = new FormData();
      formData.append('chunk', chunk);
      formData.append('chunkNumber', i + 1);
      formData.append('totalChunks', totalChunks);
      formData.append('uploadId', uploadId);

      await axios.post('/upload-chunk', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
    }

    await axios.post('/merge-chunks', { uploadId, fileName: file.name });
  }
}

显示上传进度

通过监听 axios 的上传进度事件，可以实时显示上传进度。

methods: {
  uploadWithProgress(files) {
    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
      formData.append('files[]', files[i]);
    }

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

拖拽上传

通过监听拖拽事件，实现拖拽上传功能。

<template>
  <div
    @dragover.prevent="dragover"
    @dragleave.prevent="dragleave"
    @drop.prevent="drop"
    :class="{ 'drag-active': isDragActive }"
  >
    拖拽文件到此处上传
  </div>
</template>

<script>
export default {
  data() {
    return { isDragActive: false };
  },
  methods: {
    dragover() { this.isDragActive = true; },
    dragleave() { this.isDragActive = false; },
    drop(event) {
      this.isDragActive = false;
      const files = event.dataTransfer.files;
      if (files.length > 0) this.uploadFiles(files);
    }
  }
};
</script>

以上方法可以根据实际需求选择或组合使用，以实现高效的批量上传功能。

vue实现批量上传