Vue + SpringBoot：el-upload组件单文件、多文件上传实战解析

<template>
  <el-upload
    class="upload-demo"
    drag
    :action="uploadUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :file-list="fileList"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      uploadUrl: 'http://localhost:8080/api/upload', // 你的SpringBoot上传接口地址
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log('Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.error('Error:', err, file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 ${files.length} 个文件！`);
    }
  }
};
</script>

在这个例子中，我们使用了Element UI的<el-upload>组件来实现文件的拖拽上传功能。我们设置了上传的URL为SpringBoot服务器的地址，并且定义了一些事件处理函数来处理文件的预览、移除、成功上传、错误和超出最大上传数量等情况。这个例子展示了如何将Vue和SpringBoot这两个技术栈结合在一起，实现文件的多文件上传功能。