使用 el-upload 一次性上传多个文件

2023-11-01 05:32:31

El-upload 是 Element UI 中常用的上传组件，它提供了多种功能，包括多文件上传。但是，默认情况下，el-upload 会将多选的文件分多次进行上传，这可能会导致多次的上传请求，降低上传效率。为了解决这个问题，我们可以通过配置 el-upload 的参数 multiple 为 true，来实现一次性上传多个文件的功能。

实现步骤

导入 Element UI 和 el-upload 组件。

import Vue from 'vue';
import { Upload } from 'element-ui';

Vue.use(Upload);

在组件中，声明一个 fileList 数组，用于存储需要上传的文件。

data() {
  return {
    fileList: [],
  };
},

在组件模板中，使用 el-upload 组件。

<el-upload
  :multiple="true"
  :action="'/upload'"
  :on-change="handleChange"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button>选择文件</el-button>
</el-upload>

在组件的方法中，定义 handleChange、handleSuccess 和 handleError 函数，分别用于处理文件选择、上传成功和上传失败事件。

methods: {
  handleChange(file, fileList) {
    this.fileList = fileList;
  },
  handleSuccess(response, file, fileList) {
    // 上传成功后处理逻辑
  },
  handleError(err, file, fileList) {
    // 上传失败后处理逻辑
  },
}

示例代码

<template>
  <el-upload
    :multiple="true"
    :action="'/upload'"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button>选择文件</el-button>
  </el-upload>
</template>

<script>
import Vue from 'vue';
import { Upload } from 'element-ui';

Vue.use(Upload);

export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleSuccess(response, file, fileList) {
      // 上传成功后处理逻辑
    },
    handleError(err, file, fileList) {
      // 上传失败后处理逻辑
    },
  },
};
</script>