个人记录, 代码不完善见谅.

多文件上传前端:

<script setup>
const upload = reactive({
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/data/upload"
});
const fileList = ref([])


/*文件提交*/
const submitUpload = () => {
  let formData = new FormData();
  fileList.value.forEach(file => {
    formData.append("files", file.raw)
  })
  uploads(formData).then(response => {
    console.log(response)
  }).catch(err => {

  })
}

/*文件变化*/
const onChange = (file, changeFileList) => {
  fileList.value = changeFileList;
}

</script>

<template>
  <el-upload
      ref="uploadRef"
      multiple
      accept=".txt"
      // 注意这里不要使用:file-list, 否则文件列表无法控制.
      // 2024-03-06, el-plus2.4.3版本
      v-model:file-list="fileList" 
      :headers="upload.headers"
      :auto-upload="false"
      :on-change="onChange"
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>

    <el-button type="success" @click="submitUpload">
      upload to server
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

多文件后端代码:

    @PostMapping("/uploads")
    public AjaxResult uploadFiles(List<MultipartFile> files) {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            List<String> urls = new ArrayList<>();
            List<String> fileNames = new ArrayList<>();
            List<String> newFileNames = new ArrayList<>();
            List<String> originalFilenames = new ArrayList<>();
            for (MultipartFile file : files) {
                // 上传并返回新文件名称
                String fileName = FileUploadUtils.upload2(filePath, file);
                String url = serverConfig.getUrl() + fileName;
                urls.add(url);
                fileNames.add(fileName);
                newFileNames.add(FileUtils.getName(fileName));
                originalFilenames.add(file.getOriginalFilename());
            }
            AjaxResult ajax = AjaxResult.success();
            ajax.put("urls", com.ruoyi.common.utils.StringUtils.join(urls, FILE_DELIMETER));
            ajax.put("fileNames", com.ruoyi.common.utils.StringUtils.join(fileNames, FILE_DELIMETER));
            ajax.put("newFileNames", com.ruoyi.common.utils.StringUtils.join(newFileNames, FILE_DELIMETER));
            ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }

单文件前端代码:

<script setup>
import {getToken} from "@/utils/auth.js";

const {proxy} = getCurrentInstance();

const uploadRef = ref()
const upload = reactive({
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/data/upload"
});

const submitUpload = () => {
  // 单文件
  proxy.$refs["uploadRef"].submit();
}

</script>

<template>
  <el-upload
      ref="uploadRef"
      multiple
      accept=".nc,.txt"
      :action="upload.url"
      :headers="upload.headers"
      :auto-upload="false"
      :on-error="onError"
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>

    <el-button type="success" @click="submitUpload">
      upload to server
    </el-button>

    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>

</template>

单文件后端代码:

    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile file) {
        try {
            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload2(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        } catch (Exception e) {
            return AjaxResult.error(e.getMessage());
        }
    }