基于ElementUI的用户头像上传实现
1. Vue页面<template>标签中集成上传组件
<el-row>
<el-col :span="24">
<el-form-item label="用户头像">
<el-upload
class="avatar-uploader"
action="http://localhost:8090/FinancialSystem/fileUpload.do"
:auto-upload="false"
:show-file-list="false"
:on-success="handleImageUploadSuccess"
:before-upload="validateImageFile"
:with-credentials="true">
![]()
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
2. Vue页面<script>标签中定义数据模型及处理函数
data() {
return {
formData: {
type: 'addAdmin',
name: '',
status: 1,
level: 1,
avatarUrl: ''
}
};
},
methods: {
handleImageUploadSuccess(res, file) {
console.log('上传响应:', res);
this.formData.avatarUrl = res.filePath;
},
validateImageFile(file) {
const validTypes = ['image/jpeg', 'image/png'];
const maxSize = 2 * 1024 * 1024; // 2MB
if (!validTypes.includes(file.type)) {
this.$message.error('仅支持JPG/PNG格式图片');
return false;
}
if (file.size > maxSize) {
this.$message.error('图片大小不得超过2MB');
return false;
}
return true;
},
getImgPath(filePath) {
return "http://localhost:8090/FinancialSystem/" + filePath;
}
}
- 后端Java服务接收并存储上传文件
@WebServlet("/fileUpload.do")
public class FileUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
ResponseData responseData = new ResponseData(33, "上传失败", null);
if (ServletFileUpload.isMultipartContent(request)) {
try {
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
if (items != null) {
for (FileItem item : items) {
if (!item.isFormField()) {
String realPath = getServletContext().getRealPath("/");
String originalName = item.getName();
// 生成唯一文件名
String fileName = System.currentTimeMillis() + "_" + originalName;
String targetPath = "upload/images/" + fileName;
File targetFile = new File(realPath + "/" + targetPath);
item.write(targetFile);
responseData.setCode(44);
responseData.setMessage(targetPath);
}
}
}
} catch (Exception e) {
throw new RuntimeException("文件上传异常", e);
}
}
ServletUtil.writeResponse(response, responseData);
}
}
