SpringBoot uploads pictures and echoes, and I have problems uploading folders normally, but the path reports 404, and can be uploaded to the folder, but the echo does not come out. The big pit encountered
This is my first time writing a blog, I may not write well, I hope everyone will bear with me
1. This is the front-end page
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/");
}
Summarize
1. My problem: the picture file can be uploaded to the folder normally, but http://localhost:8080/setPic/loginUpload reports an error 404, which should not be because my picture is uploaded to the folder normally, it should not Report the 404 of this path.
这个的解决方法是我的Controller层的类前没有加@RespondBody。也可以直接加@RestController
所以返回的数据格式不是json格式的数据，前端就没有办法接收到，所以错误报在了这个的路径下，
而文件能够正常上传到文件夹。
2. If it is a 404 of other problems, it must be a problem with the path. You can check if there are any missing/such problems in your paths, or leave me a message, and I can help you.
