JavaWeb el-upload图片上传SpringBoot保存并且前端使用img src直接访问（基于RuoYi-Vue3）

木子dn

已于 2023-11-23 13:17:06 修改

阅读量282

点赞数

分类专栏： SpringBoot2 文章标签： spring boot 前端后端

于 2023-11-05 20:50:55 首次发布

本文链接：https://blog.csdn.net/m0_51390969/article/details/134234327

版权

SpringBoot2 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、Vue前端

                  <el-upload
                      v-model:file-list="createParams.fileList"
                      action="http://localhost:8080/DataMgt/uploadPic"
                      :headers="{ Authorization: 'Bearer ' + getToken() }"
                      list-type="picture-card"
                      :on-success="handleSuccess"
                      :before-upload="handlePicBeforeUpload"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                  >
                    <el-icon><Plus /></el-icon>
                  </el-upload>

需要注意的是action填写后端api路径，同时header需要填写token不然会被拦截，其余的没有影响可以翻阅文档理解。

二、SpringBoot后端

@RestController
@RequestMapping("/DataMgt")
public class Home extends BaseController {
    private static String picDir = "C:\\Users\\mumu\\Desktop\\images\\";

    @RequestMapping("/uploadPic")
    public AjaxResult uploadPic(MultipartFile file) throws IOException {
        String filePath = picDir+ UUID.randomUUID().toString() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));
        File saveF = new File(filePath);
        logger.info("save pic:"+filePath);
        file.transferTo(saveF);
        return success(filePath);
    }
}

picDir填写的是图片保存到哪个文件夹路径，无论你是windows开发环境还是linux生产环境，这个路径都应该是绝对路径。
现在图片保存到了这个路径，那么我们前端img的src又如何才能经由后端直接访问图片呢？

第一，需要通过SpringBoot的@Configuration配置一个映射，如下

@Configuration
public class StaticConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**")
                .addResourceLocations("file:C:\\Users\\mumu\\Desktop\\images\\");
    }
}

意思是将C:\\Users\\mumu\\Desktop\\images\\路径映射到/images/，那么当你访问http://localhost:8080/images/1.png时其实就是在访问C:\\Users\\mumu\\Desktop\\images\\1.png

第二，需要在若依的com.ruoyi.framework.config.SecurityConfig的configure函数中中配置访问权限，将/images/添加其中，对所有人开放，如下

.antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js", "/profile/**", "/images/**").permitAll()

最后，在前端，像这样就可以经由后端访问图片啦。

<el-image src="http://localhost:8080/images/1.png" style="width: 200px;height: 200px"></el-image>

三、延伸

这是多图片上传组件，但其实每张都会和后端交互一次。

如果这个图片墙和文字搭配在一起成为一个图文动态发布页面，那么创建主副数据表，主表保存id和text表示id和文字，副表保存master_id，name，表示主表id，图片名。
当新建动态时，在前端即刻生成当前时间作为图文动态的唯一标识。
当上传图片时，以唯一标识作为master_id并以保存的名称作为name插入副表。
当动态提交时，以唯一标识作为id并以文本内容作为text插入主表。
当取消时，以唯一标识为查询条件删除主副表相关数据和图片资源。