springboot項目訪問圖片的3種實現(xiàn)方法(親測可用)
前言
主要介紹通過springboot項目訪問除項目根目錄之外的其它目錄的圖片。
一、配置類實現(xiàn)WebMvcConfigurer
WebMvcConfigurer是spring內(nèi)部提供的一種配置接口，代替了傳統(tǒng)的xml配置文件形式，
二、使用步驟
1.編寫配置類
代碼如下（示例）：
@Configuration
public class ResourcesConfig implements WebMvcConfigurer
{
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry)
{
/** 通過url訪問項目外的目錄圖片*/
registry.addResourceHandler("/cert/**").addResourceLocations("file:/D:/Download/img/");
}
}代碼截屏
2.讀入數(shù)據(jù)
代碼片段：
<img src="/cert/4.jpg" style="width: 1in; height: 1in;"> <img src="/cert/1.jpg" style="width: 1in; height: 1in;">
截屏
因為demo是在若依框架的基礎上實現(xiàn)的所以自定義函數(shù)就沒有貼上來，因為每個人的需求不一樣，此處主要是實現(xiàn)通過方法實現(xiàn)對項目根路徑之外的圖片訪問，效果是都能實現(xiàn)的
到這里想必 大家已經(jīng)知道了，就是通過配置使自定義的“cert/**”代替了指定的盤符路徑。進階思考一下，我們的想通過動態(tài)數(shù)據(jù)訪問動態(tài)圖片(用戶頭像，每個用戶都有自己獨一無二的圖片)，那么我們只需要將圖片路徑存儲在數(shù)據(jù)庫中即可，通過id或其它字段將用戶頭像的存儲路徑與用戶進行綁定，不需要存儲圖片文件本身。
數(shù)據(jù)庫存儲的數(shù)據(jù)（ps:不推薦這樣存儲叫什么1，2，3之類的名稱，我這里是為了快速達到目的，因為涉及到上傳文件。應該在那里的圖片名稱應該是日期+UUID隨機數(shù)組成，后面也會更新）
代碼片段：
<img src="/cert/' + 后端傳過來遍歷的數(shù)據(jù)集.圖片路徑對應的實體屬性 + '" style="width: 1in; height: 1in;"> <img src="/cert/' + row.certAddress2 + '" style="width: 1in; height: 1in;">
實現(xiàn)效果：
二、Nginx反向代理實現(xiàn)
2.1：安裝nginx
傻瓜式安裝，點擊下一步下一步，記住你的安裝目錄就行。
配置nginx配置文件，我的安裝在D盤，
編輯nginx.conf
找到server{那一行，箭頭1：是配置監(jiān)聽端口，我這里設置的是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;">';
}
},實現(xiàn)效果：
說明：通過nginx反向代理的路徑不需要寫在方法一的配置類中（因為我們在nginx的配置文件中寫好了），寫了也沒關系，這幾種方式都是互不影響的
三: 通過七牛云OSS訪問圖片
1注冊七牛云
注冊成功后點擊對象存儲
3：新建存儲空間。地址隨便選
4:獲取外鏈域名(注意這個域名是七牛云提供的臨時域名，有效期只有30天)。到期后就重新創(chuàng)建新的存儲空間，又會有新的外鏈域名。這個是免費的就不要要求那么多了
5:點擊“個人中心”—>“密鑰管理”獲取你的AK,SK
到目前為止。七牛云的存儲服務空間就完全搭建好了。對于使用七牛云文件存儲器現(xiàn)在只需要用到我們上面提到的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實現(xiàn)類代碼
@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){
//構(gòu)造一個帶指定 Region 對象的配置類
Configuration cfg = new Configuration(Region.autoRegion());
//...其他參數(shù)參考類注釋
UploadManager uploadManager = new UploadManager(cfg);
//默認不指定key的情況下，以文件內(nèi)容的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);
//解析上傳成功的結(jié)果
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返回了一段地址。平時我們在做圖片上傳時。就可以調(diào)用這個接口.然后將這段數(shù)據(jù)存入數(shù)據(jù)庫。
前端圖片展示部分代碼：
<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="地區(qū)" 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}-vvxyksv9kd') }}</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>就可以直接訪問了
總結(jié)
到此這篇關于springboot項目訪問圖片的3種實現(xiàn)方法(親測可用)的文章就介紹到這了,更多相關springboot項目訪問圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要講解了java中對象基礎Object類，文中運用大量代碼講解的非常詳細，想學習相關知識的小伙伴可以參考一下這篇文章2021-09-09
這篇文章主要介紹了Java8新特性之接口中的默認方法和靜態(tài)方法的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
Java基于Swing和netty實現(xiàn)仿QQ界面聊天小項目
這篇文章主要為大家詳細介紹了Java如何利用Swing和netty實現(xiàn)仿QQ界面聊天小項目，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-09-09
SpringBoot中使用Cookie實現(xiàn)記住登錄的示例代碼
這篇文章主要介紹了SpringBoot中使用Cookie實現(xiàn)記住登錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
restemplate請求亂碼之content-encoding=“gzip“示例詳解
RestTemplate從Spring3.0開始支持的一個HTTP請求工具,它提供了常見的REST請求方案的模板,及一些通用的請求執(zhí)行方法 exchange 以及 execute,接下來通過本文給大家介紹restemplate請求亂碼之content-encoding=“gzip“,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Jedis對redis的五大操作代碼詳解，分別是字符串、列表、散列、集合、有序集合，具有一定參考價值，需要的朋友可以了解下。2017-11-11
Spring Boot實戰(zhàn)之發(fā)送郵件示例代碼
本篇文章主要介紹了Spring Boot實戰(zhàn)之發(fā)送郵件示例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
MySQL中drop、truncate和delete的區(qū)別小結(jié)
在MySQL數(shù)據(jù)庫管理中,常常需要執(zhí)行刪除數(shù)據(jù)的操作,本文主要介紹了MySQL中drop、truncate和delete的區(qū)別小結(jié),具有一定的參考價值,感興趣的可以了解一下2024-04-04
MyBatis-Plus實現(xiàn)字段自動填充功能的示例
本文主要介紹了MyBatis-Plus實現(xiàn)字段自動填充功能的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
SpringBoot通過token實現(xiàn)用戶互踢功能(具體實現(xiàn))
所謂token,既用戶能夠在一定時間內(nèi)證明自己身份的一長串字符串,這篇文章主要介紹了SpringBoot通過token實現(xiàn)用戶互踢功能,需要的朋友可以參考下2024-04-04