vue+SpringBoot的图片上传
直接粘贴过来element-UI的组件实现。文件的存储位置一定要明确。
·
📝个人主页:五敷有你
🔥系列专栏:Spring
⛺️稳中求进,晒太阳
在这篇博客中,我们将介绍如何使用Vue.js和Spring Boot实现图片上传功能。具体而言,我们会使用Element-UI组件来构建前端界面,同时在后端使用Spring Boot处理图片上传请求。
前端VUE的代码实现
1. 前端部分(Vue.js)
1.1 安装Element-UI
首先,确保你的项目中已经安装了Vue.js。然后,通过以下命令安装Element-UI:
npm install element-ui
1.2 使用Element-UI的上传组件
在Vue组件中使用Element-UI的上传组件,示例代码如下:
直接粘贴过来element-UI的组件实现
<template>
<el-upload
class="avatar-uploader"
action="/uploadAvatar"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export default {
data() {
return {
imageUrl: '', // 存储图片地址
};
},
methods: {
handleAvatarSuccess(response, file) {
// 图片上传成功的处理逻辑
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
// 在上传之前的处理逻辑,例如文件大小限制、文件类型限制等
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!(isJPG || isPNG)) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return (isJPG || isPNG) && isLt2M;
},
},
};
</script>
<style scoped>
.avatar-uploader {
display: inline-block;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
line-height: 1.5;
}
</style>
后端springboot的代码实现
2.1 创建Spring Boot项目
使用Spring Initializer创建一个简单的Spring Boot项目,添加Spring Web和其他所需的依赖。
2.2 编写图片上传接口
创建一个控制器类 UploadAvatarController.java
处理图片上传请求:
package com.aqiuo.controller;
import com.aqiuo.entity.dto.Result;
import com.aqiuo.utils.RandomUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpRequest;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@RestController
@ResponseBody
@Slf4j
public class UploadAvatar {
@RequestMapping(value = "/uploadAvatar",method = {RequestMethod.POST})
public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
if(!file.isEmpty()) {
String fileName = file.getOriginalFilename();
String suffixName = fileName.substring(fileName.indexOf("."));
//设置上传文件的保存地址目录
String dirpath=request.getServletContext().getRealPath("/upload");
System.out.println(dirpath);
File parentFilePath=new File(dirpath);
//如果保存文件不存在就先创建目录
if(!parentFilePath.exists()) {
parentFilePath.mkdir();
}
String fileNewName = UUID.randomUUID() + fileName;
File newFile = new File(parentFilePath, fileNewName);
file.transferTo(newFile);
return Result.ok(newFile);
}
return null;
}
}
易错地点:
文件的存储位置一定要明确
运行效果
更多推荐
已为社区贡献1条内容
所有评论(0)