springboot项目访问图片的3种实现方法(亲测可用)
作者：java程序员CC
本文主要介绍了springboot项目访问图片的3种实现方法,通过springboot项目访问除项目根目录之外的其它目录的图片,具有一定的参考价值,感兴趣的可以了解一下
前言
主要介绍通过springboot项目访问除项目根目录之外的其它目录的图片。
一、配置类实现WebMvcConfigurer
WebMvcConfigurer是spring内部提供的一种配置接口，代替了传统的xml配置文件形式，
二、使用步骤
1.编写配置类
代码如下（示例）：
@Configuration
public class ResourcesConfig implements WebMvcConfigurer
{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
/** 通过url访问项目外的目录图片*/
registry.addResourceHandler("/cert/**").addResourceLocations("file:/D:/Download/img/");
}
}代码截屏
2.读入数据
代码片段：
<img src="/cert/4.jpg" style="width: 1in; height: 1in;"> <img src="/cert/1.jpg" style="width: 1in; height: 1in;">
截屏
因为demo是在若依框架的基础上实现的所以自定义函数就没有贴上来，因为每个人的需求不一样，此处主要是实现通过方法实现对项目根路径之外的图片访问，效果是都能实现的
到这里想必 大家已经知道了，就是通过配置使自定义的“cert/**”代替了指定的盘符路径。进阶思考一下，我们的想通过动态数据访问动态图片(用户头像，每个用户都有自己独一无二的图片)，那么我们只需要将图片路径存储在数据库中即可，通过id或其它字段将用户头像的存储路径与用户进行绑定，不需要存储图片文件本身。
数据库存储的数据（ps:不推荐这样存储叫什么1，2，3之类的名称，我这里是为了快速达到目的，因为涉及到上传文件。应该在那里的图片名称应该是日期+UUID随机数组成，后面也会更新）
代码片段：
<img src="/cert/' + 后端传过来遍历的数据集.图片路径对应的实体属性 + '" style="width: 1in; height: 1in;"> <img src="/cert/' + row.certAddress2 + '" style="width: 1in; height: 1in;">
实现效果：
二、Nginx反向代理实现
2.1：安装nginx
傻瓜式安装，点击下一步下一步，记住你的安装目录就行。
配置nginx配置文件，我的安装在D盘，
编辑nginx.conf
找到server{那一行，箭头1：是配置监听端口，我这里设置的是8090；箭头2：是配置域名（就是类似一www.baidu.com,www.12306.com等等这就叫域名），我这里是本地ip没法绑定域名就设置ip代替了
！！！箭头3这里就是最重要的一步映射文件路径了配置的代码我贴下面了
配置文件片段：
listen 8090;
server_name 192.168.61.1;
location / {
root html;
index index.html index.htm;
}
location /File/ {
root D:\Download\img;
rewrite ^/File/(.*)$ /$1 break;
}前端代码：
{
field: 'certAddress1',
title: '证件正面',
formatter: function(value, row, index) {
return '<img src="http://192.168.61.1:8090/File/' + row.certAddress1 + '" style="width: 1in; height: 1in;">';
}
},
{
field: 'certAddress2',
title: '证件背面',
formatter: function(value, row, index) {
return '<img src="http://192.168.61.1:8090/File/' + row.certAddress2 + '" style="width: 1in; height: 1in;">';
}
},实现效果：
说明：通过nginx反向代理的路径不需要写在方法一的配置类中（因为我们在nginx的配置文件中写好了），写了也没关系，这几种方式都是互不影响的
三: 通过七牛云OSS访问图片
1注册七牛云
注册成功后点击对象存储
3：新建存储空间。地址随便选
4:获取外链域名(注意这个域名是七牛云提供的临时域名，有效期只有30天)。到期后就重新创建新的存储空间，又会有新的外链域名。这个是免费的就不要要求那么多了
5:点击“个人中心”—>“密钥管理”获取你的AK,SK
到目前为止。七牛云的存储服务空间就完全搭建好了。对于使用七牛云文件存储器现在只需要用到我们上面提到的3个东西。
1：空间名称、2：外链域名、3：密钥AK、SK。
测试文件上传,然后查看图片
controller代码
@RestController
public class UploadController {
@Resource
private IUploadOssService uploadService;
@PostMapping("/oss/upload")
public AjaxResult uploadImgOss(@RequestParam("file")MultipartFile file) throws InvalidExtensionException {
return uploadService.uploadImg(file);
}
}service接口代码
public interface IUploadOssService {
AjaxResult uploadImg(MultipartFile img) throws InvalidExtensionException;
}service实现类代码
@Service
@Data
@ConfigurationProperties(prefix = "oss")
public class UploadOssServiceImpl implements IUploadOssService {
@Override
public AjaxResult uploadImg(MultipartFile img) throws InvalidExtensionException {
if (!Objects.requireNonNull(img.getOriginalFilename()).isEmpty()) {
//判断文件类型
//获取原始文件名
String originalFilename = img.getOriginalFilename();
//对原始文件名进行判断
if (!originalFilename.endsWith(".png") && !originalFilename.endsWith(".jpg")) {
String[] allowedExtension = {".png", ".jpg"};
throw new InvalidExtensionException(allowedExtension, lastName(originalFilename), originalFilename);
}
//如果判断通过上传文件到OSS
String filePath = PathUtils.generateFilePath(originalFilename);
String url = uploadOss(img, filePath);
return AjaxResult.success(url);
}
return AjaxResult.error("上传文件为空");
}
// 获取文件后缀名
private String lastName(String fileName){
if(fileName.lastIndexOf(".")==-1){
return "";//文件没有后缀名的情况
}
//此时返回的是带有 . 的后缀名
return fileName.substring(fileName.lastIndexOf("."));
}
private String accessKey;
private String secretKey;
private String bucket;
private String uploadOss(MultipartFile imgFile, String filePath){
//构造一个带指定 Region 对象的配置类
Configuration cfg = new Configuration(Region.autoRegion());
//...其他参数参考类注释
UploadManager uploadManager = new UploadManager(cfg);
//默认不指定key的情况下，以文件内容的hash值作为文件名
String key = filePath;
try {
InputStream inputStream = imgFile.getInputStream();
Auth auth = Auth.create(accessKey, secretKey);
String upToken = auth.uploadToken(bucket);
try {
Response response = uploadManager.put(inputStream,key,upToken,null, null);
//解析上传成功的结果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
System.out.println(putRet.key);
System.out.println(putRet.hash);
//下面这个七牛云cnd临时域名有效期只有一个月,失效后需要去七牛云复制新生成的
return "你的七牛云外链域名"+key;
} catch (QiniuException ex) {
Response r = ex.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
//ignore
}
}
} catch (Exception ex) {
//ignore
}
return "www";
}
}开始测试图片上传
测试通过，图片上传成功，
msg返回了一段地址。平时我们在做图片上传时。就可以调用这个接口.然后将这段数据存入数据库。
前端图片展示部分代码：
<el-table v-loading="loading" :data="movieList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="主键" v-if="false" align="center" prop="mId"/>
<el-table-column label="电影名" align="center" prop="mName"/>
<el-table-column label="封面" align="center" prop="mImg">
<template slot-scope="scope">
<img :src="'http://'+scope.row.mImg" alt="" :width="90" :height="120">
</template>
</el-table-column>
<el-table-column label="电影栏目" align="center" prop="cId"/>
<el-table-column label="类型" :show-overflow-tooltip="true" align="center" prop="mClass"/>
<el-table-column label="简介" :show-overflow-tooltip="true" align="center" prop="mInfo"/>
<el-table-column label="时长" align="center" prop="mDuration"/>
<el-table-column label="地区" align="center" prop="mAddr"/>
<el-table-column label="评分" align="center" prop="mScore"/>
<el-table-column label="上映年份" align="center" prop="mYear" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.mYear, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['appmovie:movie:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['appmovie:movie:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>就可以直接访问了
总结
到此这篇关于springboot项目访问图片的3种实现方法(亲测可用)的文章就介绍到这了,更多相关springboot项目访问图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！