Spring Boot+Vue+Element Plus 实现上传图片功能

最新推荐文章于 2025-05-19 11:35:48 发布

原创

最新推荐文章于 2025-05-19 11:35:48 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #vue.js #后端

本文介绍了一种在项目实训中实现图片上传的方法，通过结合Spring Boot后端与Vue.js前端的Element Plus组件。首先在项目中通过npm安装Element Plus，然后在main.js中导入并使用上传组件。在后端，详细阐述了Spring Boot中的service和controller方法，以完成图片上传的处理。最后，作者提供了遇到问题时的咨询方式。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

在写项目实训作业时遇到了需要上传图片的功能，分享一下方法

一、Element Plus

我这里使用的是npm安装

在终端中进入到项目，输入npm install element-plus --save
在main.js中导入Element Plus

import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

使用上传组件<el-upload></el-upload>

			<el-upload
                v-model:file-list="fileList"
                action="http://127.0.0.1:8080/api/file/upload" // 上传方法url
                list-type="picture-card" // 显示类型
                :on-preview="handlePictureCardPreview" // 钩子函数，上传执行前调用
                :on-remove="handleRemove" // 删除图片后调用
                :on-success="handleSuccess" // 上传成功后调用
           	>
	           <el-icon>
	             <Plus/>
	           </el-icon>
         </el-upload>
         <el-dialog v-model="dialogVisible">
          <img :src="dialogImageUrl" alt="Preview Image"/<

最低0.47元/天解锁文章