网站做ddns解析,建筑工地招工网,网站做新浪图床,小程序开发制作多少钱1、故事的背景
最近#xff0c;有个学弟做了一个简单的后台管理页面。于是他开始巴拉巴拉撘框架#xff0c;写代码#xff0c;一顿操作猛如虎#xff0c;终于将一个简单的壳子搭建完毕。但是在实现功能#xff1a;点击头像弹出上传图片进行头像替换的时候#xff0c;卡壳…1、故事的背景
最近有个学弟做了一个简单的后台管理页面。于是他开始巴拉巴拉撘框架写代码一顿操作猛如虎终于将一个简单的壳子搭建完毕。但是在实现功能点击头像弹出上传图片进行头像替换的时候卡壳了~
原来啊他发现图片上传成功并且图片的信息都保存进数据库后页面没有加载出图片这可就给他犯了难捣鼓了半天还是没有搞定。
2、问题剖析
于是他就过来向我求助让我帮他一起来研究代码看看是哪个步骤出了问题。这里我将简单的贴出关键的代码信息。
2.1 前端代码的剖析
前端主要是实现了一个用户信息编辑页面主功能包括用户信息展示和编辑以及头像上传和显示。我们来逐步分解并详细解释前端代码 首先看模板部分使用了Element UI的表单组件el-form绑定user数据模型。使用el-upload组件实现头像上传功能action属性定义上传地址accept属性限制上传文件类型为图片show-file-list设置为false用来隐藏文件列表。接着看script部分导出vue组件定义了初始化各个属性同时使用了钩子在组件创建时调用getUser()方法获取用户信息。至于methods则是处理了getUser()方法的实现逻辑。至于样式方面没啥好说的就是设置了上传组件的样式。 templatediv classmeel-form :modeluser label-widthauto stylemax-width: 600px enctypemultipart/form-datael-form-item label头像el-upload classavatar-uploader :actionuploadUrl acceptimage/* show-file-listfalseimg v-ifislook styleheight: 200px; width: 200px alt头像 classavatar :srcimageUrl/el-icon classavatar-uploader-icon v-else-if!islook/el-icon/el-upload/el-form-itemel-form-item label用户名el-input v-modeluser.username//el-form-itemel-form-item label性别el-input v-modeluser.sex//el-form-itemel-form-item label年龄el-input v-modeluser.age//el-form-itemel-form-item label邮箱el-input v-modeluser.mailbox//el-form-itemel-form-item label个人简介el-input v-modeluser.introduce typetextarea//el-form-item/el-form/div
/template
script
import axios from axios;export default {name: MePage,data() {return {user: {userId: ,sex: ,age: ,mailbox: ,username: ,introduce: ,headPortrait: },uploadUrl: http://localhost:8081/upload/avatar // 上传头像的接口地址,, islook: false,imgUrl: ../assets/logo.png,imageUrl: }},components: {},created() {this.getuser();},methods: {getuser() {axios.get(http://localhost:8081/user/getById?userId123).then(response {this.user response.data;this.imageUrl this.user.headPortrait ? ${this.user.headPortrait} : /assets/logo.png;console.log(图片 URL:, this.imageUrl);this.islook true;}).catch(error {console.log(error);ElMessage.error(获取用户信息失败);});}}}/script
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);height: 200px;width: 200px
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}
/style 实际上这里不知道是代码才写到一半还是没给到我完整代码的原因。单从这部分代码看功能也并不完善达不到上传图片并展示图片的预期但是点击上传后图片是没有任何变化的。所以我以这段代码为基础进行了完善来看看页面是否可以正常上传显示。
改善后的代码
templatediv classmeel-form :modeluser label-widthauto stylemax-width: 600px enctypemultipart/form-datael-form-item label头像el-uploadclassavatar-uploader:actionuploadUrlacceptimage/*show-file-listfalse:before-uploadbeforeUpload:on-successhandleSuccess:on-errorhandleError:on-changehandleFileChangeimg v-ifimageUrl styleheight: 200px; width: 200px alt头像 classavatar :srcimageUrl/el-icon classavatar-uploader-icon v-else-if!islook//el-upload/el-form-itemel-form-item label用户名el-input v-modeluser.username//el-form-itemel-form-item label性别el-input v-modeluser.sex//el-form-itemel-form-item label年龄el-input v-modeluser.age//el-form-itemel-form-item label邮箱el-input v-modeluser.mailbox//el-form-itemel-form-item label个人简介el-input v-modeluser.introduce typetextarea//el-form-item/el-form/div
/template
script
import axios from axios;
import { ElMessage } from element-plus;
export default {name: MePage,data() {return {user: {userId: ,sex: ,age: ,mailbox: ,username: ,introduce: ,headPortrait: },uploadUrl: http://localhost:8081/upload/avatar,islook: false,imgUrl: ../assets/logo.png,imageUrl: }},components: {},created() {this.getuser();},methods: {getuser() {axios.get(http://localhost:8081/user/getById?userId123).then(response {this.user response.data;this.imageUrl this.user.headPortrait ? ${this.user.headPortrait} : /assets/logo.png;console.log(图片 URL:, this.imageUrl);this.islook true;}).catch(error {console.log(error);ElMessage.error(获取用户信息失败);});},beforeUpload(file) {const isImage file.type.startsWith(image/);if (!isImage) {ElMessage.error(只能上传图片文件);return false;}return isImage;},handleSuccess(response) {console.log(图片 上传成功响应:, response);if (response.code 200) {ElMessage.success(上传成功);console.log(上传成功);// 重新调用 getuser 方法以获取最新的头像地址this.getuser();} else {ElMessage.error(上传失败: response.msg);}},handleError(err) {console.error(图片上传失败:, err);ElMessage.error(上传失败: (err.message || 未知错误));},handleFileChange(file) {// 更新显示的图片const fileURL file.raw;this.imageUrl URL.createObjectURL(fileURL);}}
}
/scriptstyle
.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);height: 200px;width: 200px
}.avatar-uploader .el-upload:hover {border-color: var(--el-color-primary);
}
/style 与一开始的代码相比 添加了 beforeUpload 方法用于在上传文件之前进行校验如果文件不是图片类型我们直接显示错误信息并阻止继续上传。添加了 handleSuccess 方法用于处理上传成功后的逻辑如果上传成功会显示成功信息并重新调用getUser 方法以获取最新的头像地址。添加了 handleError 方法用于处理上传失败后的逻辑。如果上传失败会显示错误信息。添加了 handleFileChange 方法用于在文件选择变化时更新显示的图片。通过 URL.createObjectURL 方法生成临时的 URL 来显示选择的图片。 通过我们打印的日志可以看到图片已经上传成功且数据也已经入库但是页面上的图片还是没有显示成功。 那么在确定前端已经没有问题了后接下来我们就需要排查后端看是什么原因导致的。
2.2 后端代码的剖析
后端主要是提供文件上传的接口将个人信息头像图片地址用户名性别年龄等进行编辑更新同时还提供了用户信息查询接口用来查询个人信息。我们来逐步分解并详细解释后端代码
CrossOrigin(origins http://localhost:8080)
RestController
RequestMapping(/upload)
public class Upload {Autowiredprivate UploadService uploadService;/*** 头像上传*/PostMapping(/avatar)public RestResultBoolean avatar(RequestBody RequestParam(file) MultipartFile file, HttpServletRequest request) throws Exception {if (!file.isEmpty()) {Boolean b uploadService.avatarUpload(file, request);if (Boolean.TRUE.equals(b)) {return RestResult.build(true);}}throw new Exception(头像上传失败);}
} 这段代码的主要功能是处理头像上传的 HTTP POST 请求。它通过 UploadService 服务来处理文件上传逻辑并返回上传结果。如果上传成功这个控制器类还简单配置了跨域支持允许来自 http://localhost:8080 的请求。
我们直接来看看具体实现的逻辑,逻辑很简单就是从配置文件中获取头像上传的默认路径处理上传文件信息并将上传的文件保存到指定路径。生成文件的访问URL并调用 userService.updateAvatar 方法更新用户头像URL到数据库。看着也没啥问题。
Service
public class UploadServiceImpo implements UploadService {Autowiredprivate UserService userService;//头像上传路径Value(${weibo.profile})private String defaultBaseDir;Overridepublic Boolean avatarUpload(MultipartFile file, HttpServletRequest request) {//获取当前头像上传路径String avatar defaultBaseDir;//获取当前用户id并且修改用户的头像地址// 文件名称 用户id// 获取文件的名称String originalFilename file.getOriginalFilename();// 文件后缀 例如.pngassert originalFilename ! null;String fileSuffix originalFilename.substring(originalFilename.lastIndexOf(.));// uuid 生成文件名String uuid String.valueOf(UUID.randomUUID());// 根路径String basePath avatar uuid;// 新的文件名使用uuid生成文件名String fileName uuid fileSuffix;// 创建新的文件File fileExist new File(basePath);// 文件夹不存在则新建if (!fileExist.exists()) {fileExist.mkdirs();}// 获取文件对象File newfile new File(basePath, fileName);try {// 完成文件的上传file.transferTo(newfile);} catch (Exception e) {throw new RuntimeException(文件上传失败);}//判断文件是否上传成功并保存到数据库String url request.getScheme() :// request.getServerName() : request.getServerPort() /image/ uuid / fileName;return userService.updateAvatar(123L, url);}
} 接着我们来确认下配置文件图片的存储路径也没啥问题。
server:port: 8081
weibo:# 文件路径profile: G:/working-idea/vue3/vue3/src/assets/images/ 2.3 问题剖析
现状 前端上传图片的功能已经成功上传图片并保存到数据库但页面上的图片仍然无法显示。将后端保存的图片地址在尝试浏览器打开可以发现访问不到。 原因分析 1. 路径问题前端请求的图片路径可能有误。如果使用的是相对路径路径相对于前端页面的位置可能不正确。后端生成的图片URL可能不正确如URL中拼写错误或存在多余的空格。 2. 服务器配置问题服务器可能没有配置正确的静态资源映射。例如在Spring Boot中需要配置静态资源路径确保图片可以被正确访问。 3. 浏览器缓存问题有时候浏览器会缓存图片导致显示的是旧的图片。尝试清除浏览器缓存或使用无痕模式查看图片是否能正常显示。 4. 权限问题上传的图片文件没有正确的读取权限导致Web服务器可能没有权限读取这些文件。 5. 前端代码问题前端代码中使用的图片URL可能不正确如没有拼写错误或路径错误。前端代码未正确加载了图片例如使用img标签或通过JavaScript动态加载图片。 6. 图片格式问题上传的图片格式可能不被浏览器支持。某些浏览器可能不支持某些图片格式。 基于上面的代码剖析可以看出项目比较简单也没有做权限控制代码也验证过了有问题我们也已经进行了优化上传的图片格式也是jpeg是浏览器支持的格式之一。 实际上遇到这种问题在确定前后端代码都没有问题但是图片又显示不出来的情况下一般直接查看是否配置了正确的静态资源映射。 于是我仔细查看了后端代码果然没有发现到有配置静态资源路径那么问题就很明朗了在确保路径正确的情况下由于后端没有加载静态资源所以图片是无法被正确访问的。 找到问题点就好办了我们先加上静态资源处理器让所有以 /image/ 开头的请求都会被映射到指定的文件系统路径。
Configuration
public class WebMvcConfig implements WebMvcConfigurer {Value(${default.url})private String defaultUrl;Overridepublic void addResourceHandlers(ResourceHandlerRegistry resourceHandlerRegistry) {resourceHandlerRegistry.addResourceHandler(/image/**).addResourceLocations(file: defaultUrl);}
} 可以发现现在是已经可以正常显示了且进行图片上传时也能够正常上传成功并更新显示的图片。
3. 复盘如何排查问题并找到原因点
实际在开发过程中我们总会遇到大大小小的各种问题而遇到问题时如何快速有效地排查问题并找到原因点是每个开发者所必备的技能。就拿这一次学弟遇到的问题下面是我们在解决头像上传后页面无法显示图片问题时的复盘希望能为大家提供一些参考和启示。
3.1. 确认问题现象
首先我们需要明确问题的具体现象。在这个案例中问题现象是图片上传成功并保存到数据库后页面上的图片无法显示。
3.2. 逐步排查
3.2.1 前端代码排查
检查前端代码确认前端代码中图片URL的获取和显示逻辑是否正确。我们检查了 el-upload 组件和 img 标签的 src 属性确保它们正确地绑定了图片URL。调试前端代码通过浏览器开发者工具查看网络请求和控制台输出确认图片URL是否正确生成并且没有404或其他错误。
3.2.2 后端代码排查
检查后端代码确认后端代码中图片上传和URL生成的逻辑是否正确。我们检查了 UploadService 中的 avatarUpload 方法确保图片正确上传并生成正确的URL。调试后端代码通过日志输出和断点调试确认图片上传和URL生成的过程中没有异常或错误。
3.2.3 配置文件排查
检查配置文件确认配置文件中图片存储路径是否正确。我们检查了 application.yml 中的 weibo.profile 配置项确保路径正确无误。
3.3. 分析可能原因
在排查过程中我们列出了可能导致问题的原因
路径问题图片URL路径可能不正确。服务器配置问题服务器可能没有正确配置静态资源映射。浏览器缓存问题浏览器可能缓存了旧的图片。权限问题上传的图片可能没有正确的读取权限。前端代码问题前端代码中可能存在拼写错误或路径错误。图片格式问题上传的图片格式可能不被浏览器支持。
3.4. 逐一验证
我们逐一验证了上述可能原因最终发现是由于服务器没有配置静态资源映射导致图片无法被正确访问。
3.5. 解决问题
在确认问题原因后我们通过添加静态资源处理器解决了问题。
4. 总结
通过这次排查问题的过程我们不仅解决了学弟的问题还深入探讨了前后端代码的实现和可能遇到的问题。可以总结出以下经验
- **明确问题现象**首先明确问题的具体现象有助于缩小排查范围。 - **逐步排查**从前端到后端从代码到配置文件逐步排查确保每个环节都没有问题。 - **列出可能原因**列出所有可能导致问题的原因逐一验证。 - **确认问题原因**通过验证确认问题的根本原因。 - **解决问题**针对问题原因采取相应的解决措施。
希望这些经验能帮助大家在未来的开发过程中更快更有效地排查问题并找到原因点。
