Vue之利用Element-ui文件上传——头像上传
前言
看过我前几篇写的文章都知道,我做的项目属于前后端分离,所以必然要联系到ajax(axios)请求跨域问题,因此有些问题是建立在跨域的基础上出现的。利用Element进行文件上传(自我感觉element-ui用于PC端开发比较合适唉),有几个注意的点。
爬坑
1、跨域访问后端的路径,action一定要加api;否则跨域访问会失败,然后就报错。
2、action还可以传其他参数给后台,如果需要可以在后面添加,如action=" /toUpdateAvatar?userid=1"
3、通过在上传标签里添加accept可以限制传入的文件类型,如添加accept=" .jpg , .png ",系统只会让你选择这些类型的文件。
4、在后端将文件上传到项目上时注意路径问题,暂时还没有想到如何以相对路径的方式保存到项目里,这里我用的是绝对路径。
5、此时,如果文件会顺利保存到后端服务器,但是,访问时却访问不到,所以我想应该是后端服务器没有将刚刚上传的文件部署到Tomcat上叭,所以此时的情况才会是:必须重启后端服务器才能将文件全部部署到Tomcat上,从而访问到文件,此时就需要配置映射文件来解决问题了。
前端
<template> <div> <el-upload class="avatar-uploader" :action="/api/toUpdateAvatar?userid=1" :show-file-list="false" accept=".jpg,.png" :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> </div> </template> <script> export default{ data() { return { imageUrl: '', }; }, methods: { handleAvatarSuccess(res, file) { this.imageUrl = URL.createObjectURL(file.raw); }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; } } } </script> <style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409EFF; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>
后端
/** * 上传头像 * @param * @param file * @return * @throws Exception */ @RequestMapping("/toUploadAvatar") public MessageJson updatAvatar(User user,MultipartFile file) throws Exception{ //判断文件类型 String pType=file.getContentType(); pType=pType.substring(pType.indexOf("/")+1); if("jpeg".equals(pType)){ pType="jpg"; } long time=System.currentTimeMillis(); //这里我采用绝对路径 String path="D:/(项目路径)/src/main/resources/static/images/avatar"+time+"."+pType; try{ file.transferTo(new File(path)); //文件路径保存到数据库中从而读取 userService.addVatar("http://192.168.191.3:8081/"+path.substring(path.indexOf("images/")),user); }catch (Exception e){ e.printStackTrace(); } return new MessageJson(SUCCESS,null); }
解决上传文件访问不到的问题
访问不到刚刚上传的文件,主要是因为服务器并没有把刚刚的文件部署的Tomcat上,因此要配置文件访问的映射,具体操作如下:
1: 创建配置文件类,FileUploadConfig.java
2: 添加@Configuration注解,并实现WebMvcConfigurer接口
3: 重写WebMvcConfigurer的addResourcesHandlers方法
4: 配置映射,且映射路径以file开头
具体操作如下
@Configuration public class FileUploadConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/images/**"). addResourceLocations("file:///D:/(项目存放路径)/src/main/resources/static/images/"); //如果不知道如何以file开头就用浏览器打开该图片 } }
亲测可用~~
- vue+element-ui上传文件
- vue+elementui的table行内实现el-upload文件添加/多文件上传
- Vue上传文件:ElementUI中的upload实现
- vue + element-ui + springboot + 阿里云OSS 使用表单进行图片文件等的上传(具有上传滚动条效果)
- Vue Element UI + OSS实现上传文件功能
- vue+elementui el-upload上传文件携带参数
- Vue + ElementUI + ExpressJS实现上传头像的功能
- Vue 结合element -ui实现多文件上传到后台并显示进度条
- elementUI+Vue 上传文件大小与文件类型校验
- 关于vue+element ui 实现上传文件
- 利用vue+elementUI实现部分引入组件的方法详解
- vue+elementUI实现表单和图片上传及验证功能示例
- element-ui中文件上传以及下载
- VUE Element ui附件上传
- vue + element 实现文件上传
- element-ui 文件上传修改文件名的方法示例
- vue+elementUI实现图片上传功能
- vue-cli + ElementUI 实现自定义接口上传图片
- Vue + node.js(Express) 项目中实现换头像与文件上传
- elementui el-upload附件上传--上传之前需要修改文件内容