用element-ui中的up-load组件实现简单的图片上传到本地然后回显（从前端到后端）

方式一：直接上传（auto-upload=“true”）

一：前端样式以及效果：

前端样式代码如下：

export default {data() {return {imgUrl: ''};},methods: {sucuploadimg(res) {this.imgUrl = res.data;}}}

二：后端Controller层

@RestController@RequestMapping("/admin/file")@Slf4j@Api(value = "文件相关接口",tags = {"文件相关接口操作接口"})public class filecontroller {@PostMapping("/uploadfoodpicture")@ApiOperation("上传食物图片")public Result uploadFoodPicture(@RequestBodyMultipartFile file) throws Exception {//获取图片原文件名log.info("启动图片上传功能");String url= FileUtil.uploadimg(file);//将传递的图片交给FileUtil处理return Result.success(200,"上传图片成功",url);}}

这里的处理逻辑是将前端传递进来的图片交给FileUtil处理，接下来看FileUtil的代码：

@Componentpublic class FileUtil {public staticString imgsrc = "D:\\image\\";public static String uploadimg(MultipartFile file) throws IOException {String originalFilename = file.getOriginalFilename();//获取原文件的后缀名if (originalFilename != null) {String fileExtension = originalFilename.substring(originalFilename.lastIndexOf("."));String uuid = UUID.randomUUID().toString();// 使用UUID和文件扩展名来创建一个新的文件名String newFilename = uuid + fileExtension;file.transferTo(new File(FileUtil.imgsrc + newFilename));String url ="http://localhost:8080"+"/uploadimg/" +newFilename;return url;}return "上传失败";}}

首先获取传递进来图片的文件名后缀 然后用UUID将其拼接得到一个新的名字

将图片存入到本地的文件夹下面 接下来返回路径 这里我用后端进行拼接，看看这三个参数：

“http://localhost:8080″+”/uploadimg/” +newFilename;

其中”http://localhost:8080″是服务器端口号地址 根据环境进行变化，也可以拼接在前端

“/uploadimg/”是拦截器的关键词 一会进行介绍

newFilename是经过UUID拼接后的新文件名

我们接下来看看拦截器：在config文件夹下新建

@Configuration@EnableWebMvcpublic class MvcConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {// 配置静态资源映射registry.addResourceHandler("/uploadimg/**").addResourceLocations("file:///"+ FileUtil.imgsrc);}}

拦截到路径为/uploadimg/**后会替换为下面的地址 而file:///是固定的，FileUtil.imgsrc是在FileUtil里面定义的存储图片的地址

到此后端的准备工作也完毕了

点击上传图片