SpringBoot上传图片和回显,以及我出现的问题正常上传文件夹,但路径报404,能传到文件夹,但是回显不出来照片,遇见的大坑
第一次写博客啊,可能写的不好希望大家担待
1、这个是前端的页面
1、首先是我们选择照片后的点击确定的时候会执行beforeAvatarUpload进行一个前置验证,
验证图片的大小格式,就不细说了,然后通过action执行controller层的方法,放在下面了,
beforeAvatarUpload这个是执行完controller的方法后返回的结果拼接后去访问文件夹的
进行照片的回显,下面会。
// An highlighted block
<el-row>
<el-col :push="8" :span="6">
<el-form-item label="个人照片">
<el-upload
class="avatar-uploader"
action="/setPic/loginUpload"
:auto-upload="autoUpload"
name="imgFile"
: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>
</el-form-item>
</el-col>
</el-row>
2、这个就是Controller层了,就是接收前端的imgFile,文件的名字,进行格式的分割,
加上UUID拼接成新的名字,最后通过multipartFile上传到我们设定的文件夹下面,如果
上传成功,我返回的是是一个封装好的类,成功的话将我们的fileName返回传递给前端
进行拼接
// 注册图片的上传
@RequestMapping("/setPic/loginUpload")
public Result upload(@RequestParam("imgFile") MultipartFile multipartFile) {
String originalFilename = multipartFile.getOriginalFilename();
int lastIndexOf = originalFilename.lastIndexOf(".");
//获取文件后缀
String suffix = originalFilename.substring(lastIndexOf - 1);
String fileName = UUID.randomUUID().toString()+suffix;
File file = new File("D:/upload/registPic/",fileName);
try {
multipartFile.transferTo(file);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, MessageConstant.PIC_UPLOAD_FAIL);
}
return new Result(true,MessageConstant.PIC_UPLOAD_SUCCESS,fileName);
}
3、我们这里response接收传递过来的新图片文件的名称,this.imageUrl就是我们1、里面设
置的照片的显示路径,拼接完成后就可以在视图解析器里面进行配置了,下面说。
this.formData.img=response.data;这个是将我们的照片名称放入到formData.img下面提供
我们将最后的全部数据传给数据库,这个就不细说了,重点不是这个。setPicImg这个
的路径名字是随便设定的不一定要和我们1中acton中的路径一样,我们是为了方便下面视图解析
用的,下面介绍
//文件上传成功后的钩子,response为服务端返回的值,file为当前上传的文件封装成的js对象
handleAvatarSuccess(response, file) {
console.log("response.data");
this.imageUrl="http://localhost:8080/setPicImg/"+response.data;
this.formData.img=response.data;
},
4、public class MyWebMvcConfigurer implements WebMvcConfigurer 我们创建个这个类,
大家应该都知道这个是视图解析器,我们拦截所有的/setPicImg/**路径(这个不就是我们)然
后将他去我们设定好的文件夹去访问我们的图片文件。这样的话我们的图片就能成功回显啦!!!
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/setPicImg/**").addResourceLocations("file:D:/upload/registPic/");
}
总结
1. 我出现的问题:图片文件能够正常上传到文件夹但是,http://localhost:8080/setPic/loginUpload报错404,这个是不应该的因为我的图片是正常上传到文件夹的,不应该报这个路径的404啊。
这个的解决方法是我的Controller层的类前没有加@RespondBody。也可以直接加@RestController
所以返回的数据格式不是json格式的数据,前端就没有办法接收到,所以错误报在了这个的路径下,
而文件能够正常上传到文件夹。