springboot項目訪問圖片的3種實現(xiàn)方法(親測可用)

更新時間：2023年09月27日 14:50:39 作者：java程序員CC

本文主要介紹了springboot項目訪問圖片的3種實現(xiàn)方法,通過springboot項目訪問除項目根目錄之外的其它目錄的圖片,具有一定的參考價值,感興趣的可以了解一下

前言

主要介紹通過springboot項目訪問除項目根目錄之外的其它目錄的圖片。

一、配置類實現(xiàn)WebMvcConfigurer

WebMvcConfigurer是spring內部提供的一種配置接口，代替了傳統(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.讀入數據

代碼片段：

<img src="/cert/4.jpg" style="width: 1in; height: 1in;">
<img src="/cert/1.jpg"  style="width: 1in; height: 1in;">

截屏

因為demo是在若依框架的基礎上實現(xiàn)的所以自定義函數就沒有貼上來，因為每個人的需求不一樣，此處主要是實現(xiàn)通過方法實現(xiàn)對項目根路徑之外的圖片訪問，效果是都能實現(xiàn)的

到這里想必大家已經知道了，就是通過配置使自定義的“cert/**”代替了指定的盤符路徑。進階思考一下，我們的想通過動態(tài)數據訪問動態(tài)圖片(用戶頭像，每個用戶都有自己獨一無二的圖片)，那么我們只需要將圖片路徑存儲在數據庫中即可，通過id或其它字段將用戶頭像的存儲路徑與用戶進行綁定，不需要存儲圖片文件本身。

數據庫存儲的數據（ps:不推薦這樣存儲叫什么1，2，3之類的名稱，我這里是為了快速達到目的，因為涉及到上傳文件。應該在那里的圖片名稱應該是日期+UUID隨機數組成，后面也會更新）

代碼片段：

<img src="/cert/' + 后端傳過來遍歷的數據集.圖片路徑對應的實體屬性 + '" 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){
        //構造一個帶指定 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="地區(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}-wppm3vysvbp') }}</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種實現(xiàn)方法(親測可用)的文章就介紹到這了,更多相關springboot項目訪問圖片內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

使用springboot訪問圖片本地路徑并映射成url

java通過共享變量結束run停止線程的方法示例
這篇文章主要介紹了java通過共享變量結束run停止線程的方法,大家參考使用
2013-11-11
Springboot RabbitMQ 消息隊列使用示例詳解
本文通過示例代碼介紹了Springboot RabbitMQ 消息隊列使用,對大家的學習或工作具有一定的參考借鑒價值,感興趣的朋友跟隨小編一起看看吧
2024-06-06
java計算百分比值的方法
這篇文章主要介紹了java計算百分比值的方法,涉及java數值運算的技巧,需要的朋友可以參考下
2015-03-03
log4j2動態(tài)修改日志級別及拓展性使用詳解
這篇文章主要介紹了log4j2動態(tài)修改日志級別及拓展性使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
Java框架Struts2實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了Java框架Struts2實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
Java實現(xiàn)簡單文字驗證碼以及人機驗證
人機驗證技術的發(fā)展也在不斷進化,從最初的簡單驗證碼到現(xiàn)在的人工智能驅動的高級驗證系統(tǒng),下面這篇文章主要介紹了Java實現(xiàn)簡單文字驗證碼以及人機驗證的相關資料,需要的朋友可以參考下
2025-04-04
SpringCloud中的Eureka集群配置方法
這篇文章主要介紹了SpringCloud中的Eureka集群配置,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
SpringBoot與gRPC2.0集成的實現(xiàn)示例
本文主要介紹了SpringBoot與gRPC2.0集成,包括HTTP/2支持、ProtocolBuffers增強、服務定義改進等內容,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2026-04-04
Java中的java.lang.reflect.Type簡介
在 Java 中,java.lang.reflect.Type 是一個接口,代表所有類型的通用超類型,它包括原始類型、參數化類型、數組類型、類型變量和基本類型,本文給大家講解Java中的java.lang.reflect.Type是什么,需要的朋友可以參考下
2024-06-06
SpringBoot中application.properties與application.yml區(qū)別小結
本文主要介紹了SpringBoot中application.properties與application.yml區(qū)別小結,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-10-10