持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
如果我们请求接口会报500错误，我们再看一下后端有没有报错信息。果然也报错了，需要我们去设置一下文件上传的大小限制。
我们打开application.yml，在spring下面添加一下配置：
servlet:
multipart:
enabled: true
max-file-size: 10MB
max-request-size: 10MB
然后重启项目，我们再次请求接口。
看到了吧，有数据返回，这个就是我们刚才上传图片的地址，我们去查看一下，这个目录会自动创建的，是你项目当前路径下的地方，假如你的项目在D盘，则这个图片地址就会在D盘下面。
看到了吧，我的项目就在D盘，所以这个文件就在D盘下。
接下来我们就要去实现前端的功能了，在这之前我们还要加一个图片拦截的操作，防止前端访问不到图片的操作。
新建一个配置类：MyInterceptorConfig.java，我放在了config包下。
新建一个配置类：MyInterceptorConfig.java，我放在了config包下。
package com.blog.personalblog.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* 这个是访问图片拦截的
*
* @author: SuperMan
* @create: 2022-08-20
**/
@Configuration
public class MyInterceptorConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/blog/uploadFile/articles/**")//前端url访问的路径，若有访问前缀，在访问时添加即可，这里不需添加。
.addResourceLocations("file:/blog/uploadFile/articles/");//映射的服务器存放图片目录。
}
}
还有一个再写前端之前，我们将上传图片的接口过滤掉，不受登录的限制，还有个一图片预览的地址也要放开，否则请求图片地址会报302重定向错误这个是一个坑。
打开ShiroConfiguration.java，再新增两个配置。
filterChainDefinitionMap.put("/blog/uploadFile/articles/**","anon");
filterChainDefinitionMap.put("/article/upload", "anon");
接下来打开前端项目，我们来写前端上传图片的页面。
<el-form-item label="上传封面">
<el-upload
class="upload-cover"
drag
action="null"
:http-request="importFile"
multiple
:before-upload="handleUploadBefore"
>
<i class="el-icon-upload" v-if="article.imageUrl == ''" />
<div class="el-upload__text" v-if="article.imageUrl == ''">
将文件拖到此处，或<em>点击上传</em>
</div>
<img
v-else
:src="article.imageUrl"
width="360px"
height="180px"
/>
</el-upload>
</el-form-item>
上边是上传图片的组件el-upload，这里面有几个注意点，大家可以看一下element官方文档，这里给大家说一下，在开发的过程中一定要去看开发文档，里面有很多的组件设置的属性，还有具体的使用方法。
我原来想使用组件自带的action直接使用上传的地址，但是测试了一下会出现跨域的问题，我们这个项目是统一走的api那边的路由，所以我直接换成了自定义上传的方式，我感觉自定义上传是的代码会更加的清晰，自定义上传的地址就要使用到 :http-request，这个文档也有说明。大家一定要看文档
我们需要写两个方法，一个是图片上传的方法，另一个是图片上传之前进行验证的操作。
以下是上传之前校验图片大小和格式
handleUploadBefore(file) {
const isJPGORPNG = file.type === "image/jpeg" || file.type === "image/png";
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isJPGORPNG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
}
if (!isLt10M) {
this.$message.error('上传图片大小不能超过 10MB!');
}
return isJPGORPNG && isLt10M;
},
图片上传接口请求。
importFile(param){
let fd = new FormData();
fd.append("file", param.file); // 传文件
uploadImg(fd).then(res => {
if (res.data && res.data.code === 200) {
this.$message({
type: 'success',
message: '图片上传成功!'
})
}
this.article.imageUrl = res.data;
})
},
这个FormData实现form表单数据的序列化，将数据以键值对 name/value 的形式传到后台，从而减少表单元素的拼接，提高工作效率。
向FormData中添加新的属性值使用append，我们后端接收的参数就是file，所以我们添加一个file即可。
然后我们将上传图片的接口加入到接口中。在article.js接口中。
export function uploadImg(data) {
return request({
url: '/article/upload',
method: 'post',
data
})
}
别忘了在import中引入该接口。
好啦，这个上传的功能基本上实现了，我们测试一下，
好啦，文章上传功能就这些，下面我们来写文章的发布功能。
