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,即可看到文件上传界面。
相关推荐
Albert Edison4 小时前
【最新版】IntelliJ IDEA 2025 创建 SpringBoot 项目
java·spring boot·intellij-idea
Piper蛋窝5 小时前
深入 Go 语言垃圾回收:从原理到内建类型 Slice、Map 的陷阱以及为何需要 strings.Builder
后端·go
六毛的毛7 小时前
Springboot开发常见注解一览
java·spring boot·后端
AntBlack8 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669138 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
uzong8 小时前
curl案例讲解
后端
开开心心就好9 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
一只叫煤球的猫9 小时前
真实事故复盘:Redis分布式锁居然失效了?公司十年老程序员踩的坑
java·redis·后端
猴哥源码9 小时前
基于Java+SpringBoot的农事管理系统
java·spring boot
大鸡腿同学10 小时前
身弱武修法:玄之又玄,奇妙之门
后端