环境
jdk17 + vue3
效果
后端
后端上传图片后返回图片的url
前端得到结果后在页面展示
package com.example.demo.controller;
import com.example.demo.util.Res;
import jakarta.servlet.http.HttpServletRequest;
import lombok.extern.slf4j.Slf4j;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
@Slf4j
@RestController
@RequestMapping("/upload")
public class UploadController {
private final ResourceLoader resourceLoader;
public UploadController(ResourceLoader resourceLoader) {
this.resourceLoader = resourceLoader;
}
@PostMapping("/file")
public Res<Object> upload(@RequestParam("file") MultipartFile file, HttpServletRequest request){
try{
File dir = new File(resourceLoader.getResource("classpath:/static/").getFile(), "upload");
if (!dir.exists()) {
dir.mkdirs();
}
String fileName = UUID.randomUUID().toString();
file.transferTo(new File(dir.getAbsolutePath() + File.separator + fileName + ".png"));
String url = request.getScheme() + "://" +request.getServerName() +":"+request.getServerPort() + "/upload/" +fileName +".png";
return Res.success("文件上传成功",url);
}catch (Exception ex) {
return Res.error("文件上传失败");
}
}
}
前端
用的Element-plus的upload组件
handleAvatarSuccess 文件上传成功的回调
在这个案例中我们把上传成功后的url赋值给imageUrl 方便在前端展示
<script setup>
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
const imageUrl = ref("")
const handleAvatarSuccess = (res, file) => {
if (res.code !== 200) {
return ElMessage.error("文件上传失败");
}
imageUrl.value = res.data
return ElMessage.success("文件上传成功");
}
const beforeAvatarUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg') {
ElMessage.error('Avatar picture must be JPG/PNG/JPEG format!')
return false
} else if (rawFile.size / 1024 / 1024 > 2) {
ElMessage.error('Avatar picture size can not exceed 2MB!')
return false
}
}
</script>
<template>
<div class="upload">
<el-upload class="avatar-uploader" action="http://127.0.0.1:8000/upload/file" :show-file-list="false"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
</div>
</template>
<style scoped>
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
</style>