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

一、Vue前端

language-html

<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后端

language-java

@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配置一个映射，如下

language-java

@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/添加其中，对所有人开放，如下

language-java

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

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

language-html

<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插入主表。
当取消时，以唯一标识为查询条件删除主副表相关数据和图片资源。