使用 Element el-upload 控件上传文件并且带参数

一、概述

前面我实现了文件的上传，但是我还需要带一个参数，表明我传了什么文件给后端。

二、方法

data 属性可以在上传时附带参数，类型是 Record<string, any>，因此可以通过这个实现。

action 属性可以将文件传到后端去。

ref 属性可以让外部找到这个控件。

三、代码

3.1 html 部分

  <el-upload
    ref="uploadRef"
    class="upload-demo"
    accept=".xls,.xlsx,.csv"
    action="/uploadCsvFile"
    :on-change="handleChange"
    :before-upload="handleBeforeUpload"
    :auto-upload="false"
    :data={selectIndex:value}
    :limit="1"
    :file-list="fileList"
  >
  
  <template #trigger>
     <el-button type="primary" round>选择 Excel 文件</el-button>
   </template>

   <el-button class="ml-3" type="submit" @click="submitUpload" round>
     上传
   </el-button>

3.2 js 部分

setup(props, ctx) {
    const value = ref(1);
    });

    return {
      fileList: [], // 定义一个空数组
      value,
      data: {
        selectIndex: value,
      }
    };
  },
  
methods: {
    /**
     * 提交上传的文件
     */
    submitUpload() {
      //判断是否有文件再上传
      if (this.fileList.length === 0) {
        return this.$message.warning("请选取文件后再上传");
      }
      this.$refs.uploadRef.submit();
   }
}

3.3 后端处理

/**
 * 读取前端用户上传过来的 csv 文件
 * @author 云胡
 * @param csvFile 上传的 csv 文件
 * @param selectIndex 前端 el-upload 控件中 data 中的值
 */
@PostMapping(value = "/uploadCsvFile")
@ResponseBody
public void readUploadCsvFile(@RequestParam("file") MultipartFile csvFile,  @RequestParam int selectIndex) throws IOException {
    System.out.println("selectIndex = " + selectIndex);
}