springBoot与ElementUI配合上传文件

以下是使用Vue CLI创建的Vue项目,结合Element UI来实现文件上传功能的完整示例。

步骤

  1. 创建Vue项目:确保你已经安装了Vue CLI,若未安装,可使用以下命令安装:
bash 复制代码
npm install -g @vue/cli

然后创建一个新的Vue项目:

bash 复制代码
vue create element-file-upload-demo
cd element-file-upload-demo
  1. 安装Element UI:在项目根目录下执行以下命令安装Element UI:
bash 复制代码
npm install element-ui -S
  1. 配置Element UI :在src/main.js中引入Element UI:
javascript 复制代码
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  render: h => h(App),
}).$mount('#app');
  1. 编写后端接口(使用Spring Boot):后端代码和之前的示例相同,这里再给出一遍。
java 复制代码
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public Map<String, Object> uploadFile(@RequestParam("file") MultipartFile file) {
        Map<String, Object> result = new HashMap<>();
        if (file.isEmpty()) {
            result.put("success", false);
            result.put("message", "上传的文件为空");
            return result;
        }
        try {
            String filePath = "upload/" + file.getOriginalFilename();
            File dest = new File(filePath);
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            }
            file.transferTo(dest);
            result.put("success", true);
            result.put("message", "文件上传成功");
        } catch (IOException e) {
            result.put("success", false);
            result.put("message", "文件上传失败:" + e.getMessage());
        }
        return result;
    }
}
  1. 编写前端组件(Vue) :在src/components目录下创建FileUpload.vue组件:

  2. App.vue中使用组件

vue 复制代码
<template>
  <div id="app">
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './components/FileUpload.vue';

export default {
  name: 'App',
  components: {
    FileUpload
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目

  1. 启动Spring Boot项目。
  2. 在Vue项目根目录下执行npm run serve启动前端项目。
  3. 打开浏览器访问http://localhost:8080,即可看到文件上传界面。
相关推荐
库库林_沙琪马14 小时前
REST接口幂等设计深度解析
spring boot·后端
IT_陈寒14 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
智商偏低14 小时前
ASP.NET Core 身份验证概述
后端·asp.net
冷冷的菜哥14 小时前
ASP.NET Core使用MailKit发送邮件
后端·c#·asp.net·发送邮件·mailkit
canonical_entropy14 小时前
XDef:一种面向演化的元模型及其构造哲学
后端
小林coding14 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
lypzcgf14 小时前
Coze源码分析-资源库-删除插件-后端源码-错误处理与总结
人工智能·后端·go·coze·coze源码分析·ai应用平台·agent平台
文心快码BaiduComate14 小时前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
SamDeepThinking15 小时前
在Windows 11上配置Cursor IDE进行Java开发
后端·ai编程·cursor
知其然亦知其所以然15 小时前
面试官微笑发问:第100万页怎么查?我差点当场沉默…
后端·mysql·面试