封装el-upload实现大文件上传

要封装el-upload实现大文件上传，可以按照以下步骤进行操作:

1. 在el-upload组件中设置file-list属性为一个数组，用于存储上传成功的文件信息。

2. 创建一个方法用于处理上传文件。在这个方法中，使用FormData对象来创建一个文件表单对象，并将需要附加的参数添加到表单中。

3. 在el-upload组件中设置before-upload属性为一个方法，用于在上传文件之前进行文件格式的判断。在该方法中，可以通过获取文件的后缀名或其他方式来判断文件格式是否满足需求。

4. 在el-upload组件中设置action属性为上传文件的接口地址。

5. 在el-upload组件中设置on-success属性为一个方法，用于在文件上传成功后执行的操作。在该方法中，可以将上传成功的文件信息添加到file-list数组中。

下面是一个示例代码，演示了如何封装el-upload实现大文件上传：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :file-list="fileList"
    multiple
  >
    <el-button>选择文件</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload',
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      // 在这里进行文件格式的判断，例如判断文件后缀名
      const validExtensions = ['.xlsx', '.xls'];
      const extension = file.name.slice(file.name.lastIndexOf('.'));
      if (!validExtensions.includes(extension)) {
        this.$message.error('文件格式不正确');
        return false;
      }
      return true;
    },
    onSuccess(response, file) {
      // 在这里处理文件上传成功后的操作，例如将上传成功的文件信息添加到fileList数组中
      this.fileList.push(file);
    }
  }
};
</script>

在这个示例中，el-upload组件的action属性设置为/api/upload，表示上传文件的接口地址。before-upload属性绑定了一个方法beforeUpload，用于文件格式的判断。on-success属性绑定了一个方法onSuccess，用于文件上传成功后的操作。file-list属性绑定了一个数组fileList，用于存储上传成功的文件信息。

通过以上步骤，可以封装el-upload组件实现大文件上传，并在上传文件之前进行文件格式的判断。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [elemetUi 组件–el-upload实现上传Excel文件的实例](https://download.csdn.net/download/weixin_38574410/13192019)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue+axios+el-upload实现文件上传（带参数）：](https://download.csdn.net/download/weixin_38502290/14016804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [温控器LORA传输项目(lora)](https://download.csdn.net/download/m0_58719994/88269625)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]