點擊上方?好好學java?，選擇?星標?公眾號
重磅資訊、干貨，第一時間送達
今日推薦：硬剛一周，3W字總結，一年的經驗告訴你如何準備校招！
個人原創100W+訪問量博客：點擊前往，查看更多
網上已經一些運行不錯的圖床了，比如
SM.MS https://sm.ms/
圖殼 https://imgkr.com
路過圖床 https://imgchr.com/
那為什么我們還要自己搭建圖床呢？一來是因為碼農總是喜歡折騰，二來是有了自己的圖床數據自己存儲更安全。那么接下來我們就搞起來。下面是演示地址，可以先看一下搭建完成的效果。
https://xiaotuwo.github.io
點擊按鈕上傳圖片，完成以后可以復制鏈接和下載
準備前端環境
安裝 nodejs
自行去nodejs 官網下載，我們主要是為了使用 npm 工具。
安裝淘寶鏡像，如果是在國內，下載鏡像很慢，所以使用國內的鏡像 ? 。
sudo?npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org
安裝 vue-cli 工具
因為我們前端使用的 vue，所以需要安裝vue-cli
cnpm?install?-g?@vue/cli
創建項目
vue?create?xiaotuwo
添加 antd 依賴
cnpm?install?ant-design-vue?--save
啟動
cd?xiaotuwo??
npm?run?serve??
訪問，能夠訪問 HelloWorld 頁面說明我們環境準備成功了。
http://localhost:8080
編寫前端代碼
到這里我們基礎環境就搭建完成了，下面就開始編寫前端的代碼。我們是以 sm.ms 作為原型進行搭建。如下圖我們只編輯他的頭部，上傳部分和尾部
成品形態如下，把 sm.ms 拖拽上傳圖片的交互設計改成了點擊上傳圖片，不過如果你想實現拖拽也是非常簡單，下面是 antd 的樣式，換一個標簽即可。
https://www.antdv.com/components/upload-cn/
頭部和尾部代碼非常簡單，我們只講解上傳部分代碼。搭建好 vue 框架以后去上面提供的 antd 的網址里面找到 upload 控件，直接點擊復制自己喜歡的代碼樣式，粘貼到 content/index.vue 里面就可以了，然后修改 a-upload 的 action 為自己的服務器地址即可，本地測試就是http://localhost:8887/api/images/upload，下文中也有配套的服務端代碼。
vue 的語法就不具體展開了，主要講解一個地方， handlePreview 方法里面我添加了一個復制鏈接的邏輯，可以輕松的點擊預覽的時候復制圖片鏈接，這樣方便的把網址放入其他地方進行使用。
his.$message.success('復制圖片鏈接成功');
document.addEventListener("copy",?function?copyCall(e)?{e.preventDefault()e.clipboardData.setData("text/html",?file.preview)e.clipboardData.setData("text/plain",?file.preview)document.removeEventListener("copy",?copyCall)
})
到這里基本的前端的搭建完成了，可以直接查看源碼
https://github.com/xiaotuwo/xiaotuwo-client
服務器端環境準備
本文采用的是 US3 進行圖床搭建，目前 US3 有 20G 的免費存儲和 每個月 20G 的免費流量，對于自用和起步還是足夠的。
復制下面的鏈接到瀏覽器訪問查看 US3 官網，首次進入需要注冊
https://urlify.cn/YNNBNn
注冊完成以后，進入控制臺創建 US3 空間
進入空間以后填寫存儲名，私有空間和公開空間都可以，我創建的是 xiaotuwo.cn-bj.ufileos.com 留存備用。
在 US3 控制臺創建令牌，主要是用來上傳，刪除圖片使用
選擇好自己剛才創建的空間，設置年限點擊確定即可，記得一定要勾選令牌的權限
點擊完成以后獲取到公鑰私鑰，復制備用
編寫服務端代碼
服務端代碼主要分為三個部分
1、接收請求的 Controller
2、上傳圖片到 US3 的邏輯
3、返回內容處理
1、 編寫 Controller
使用 MultipartHttpServletRequest 接收到前端的 file 文件，調用 uCloudProvider 進行上傳。
@PostMapping({"/api/files/upload"})@ResponseBodypublic?FileDTO?upload(HttpServletRequest?request)?{FileDTO?resultFileDTO?=?new?FileDTO();MultipartHttpServletRequest?multipartRequest?=?(MultipartHttpServletRequest)?request;MultipartFile?file?=?multipartRequest.getFile("file");long?start?=?System.currentTimeMillis();try?{if?(file?==?null)?{resultFileDTO.setStatus("error");}FileDTO?fileDTO?=?uCloudProvider.uploadWithExpired(file.getInputStream(),?file.getContentType(),?Objects.requireNonNull(file.getOriginalFilename()));log.info("UPLOAD_FILE_EXPIRED|ip:{}|referer:{}|url:{}|cost:{}",?getIpAddress(request),?request.getHeader("referer"),?fileDTO.getUrl(),?System.currentTimeMillis()?-?start);executorService.submit(new?UCloudScanner(fileDTO,?uCloudProvider,?executorService,?1));resultFileDTO.setName(fileDTO.getName());resultFileDTO.setUrl(fileDTO.getUrl());resultFileDTO.setThumbUrl(fileDTO.getUrl());resultFileDTO.setStatus("done");}?catch?(Exception?e)?{log.error("UPLOAD_FILE_ERROR",?e);resultFileDTO.setStatus("error");}return?resultFileDTO;}
2、上傳圖片到 US3 的邏輯
上傳 US3 主要是一些配置文件，我直接使用的 Maven 的 Filter 處理，配置文件在 pom.xml 里面，編譯的時候寫入 application.properties
<id>dev</id>
<properties><server.port>8887</server.port><ucloud.ufile.public-key>你的公鑰</ucloud.ufile.public-key><ucloud.ufile.private-key>你的私鑰</ucloud.ufile.private-key><ucloud.ufile.upload-domain-private>你的bucket名字.cn-bj.ufileos.com</ucloud.ufile.upload-domain-private><ucloud.ufile.download-domain-private>你的bucket名字.cn-bj.ufileos.com</ucloud.ufile.download-domain-private><ucloud.uaicensor.publicKey>鑒黃公鑰</ucloud.uaicensor.publicKey><ucloud.uaicensor.privateKey>鑒黃私鑰</ucloud.uaicensor.privateKey><ucloud.uaicensor.resourceId>鑒黃ID</ucloud.uaicensor.resourceId><ucloud.uaicensor.url>http://api.uai.ucloud.cn/v1/image/scan</ucloud.uaicensor.url>
</properties>
<activation><activeByDefault>true</activeByDefault>
</activation>
我們會發現配置文件里面除了文件的配置還有一套鑒黃的配置，對的這個地方不是本文的重點，但是圖床一定要有鑒黃的能力，具體的實現可以參考文章 怒爬某 Hub 資源就為擼了一個鑒黃平臺
具體 US3 的邏輯代碼也是非常的簡單，主要的邏輯就是上傳，使用私鑰和時間戳生成鏈接，顯示。
public?FileDTO?upload(InputStream?fileStream,?String?mimeType,?String?fileName)?{String?generatedFileName;String[]?filePaths?=?fileName.split("\\.");if?(filePaths.length?>?1)?{generatedFileName?=?UUID.randomUUID().toString()?+?"."?+?filePaths[filePaths.length?-?1];}?else?{throw?new?ErrorCodeException(ErrorCode.FILE_UPLOAD_FAIL);}long?start?=?System.currentTimeMillis();try?{log.debug("UCloudProvider?start?upload?file,?filename?:?{},?time?:?{}",?fileName,?new?Date());ObjectAuthorization?objectAuthorization?=?new?UfileObjectLocalAuthorization(publicKey,?privateKey);ObjectConfig?config?=?new?ObjectConfig(uploadDomainPrivate);PutObjectResultBean?response?=?UfileClient.object(objectAuthorization,?config).putObject(fileStream,?mimeType).nameAs(generatedFileName).toBucket(bucketNamePrivate).setOnProgressListener((bytesWritten,?contentLength)?->?{}).execute();log.debug("UCloudProvider?end?upload?file,?filename?:?{},?time?:?{},?cost?:?{}",?fileName,?new?Date(),?System.currentTimeMillis()?-?start);if?(response?!=?null?&&?response.getRetCode()?==?0)?{long?start2?=?System.currentTimeMillis();log.debug("UCloudProvider?start?get?url,?filename?:?{},?time?:?{}",?fileName,?new?Date());String?url?=?UfileClient.object(objectAuthorization,?new?ObjectConfig(downloadDomainPrivate)).getDownloadUrlFromPrivateBucket(generatedFileName,?bucketNamePrivate,?24?*?60?*?60).createUrl();log.debug("UCloudProvider?end?get?url,?filename?:?{},?time?:?{},?cost?:?{}",?fileName,?new?Date(),?System.currentTimeMillis()?-?start2);FileDTO?fileDTO?=?new?FileDTO();fileDTO.setUrl(url.replace("http",?"https"));fileDTO.setName(generatedFileName);return?fileDTO;}?else?{log.debug("UCloudProvider?end?upload?file,?filename?:?{},?time?:?{},?cost?:?{}",?fileName,?new?Date(),?System.currentTimeMillis()?-?start);log.error("upload?error,{}",?response);throw?new?ErrorCodeException(ErrorCode.FILE_UPLOAD_FAIL);}}?catch?(UfileClientException?|?UfileServerException?e)?{log.debug("UCloudProvider?end?upload?file,?filename?:?{},?time?:?{},?cost?:?{}",?fileName,?new?Date(),?System.currentTimeMillis()?-?start);log.error("upload?error,{}",?fileName,?e);throw?new?ErrorCodeException(ErrorCode.FILE_UPLOAD_FAIL);}}
3、 返回內容處理，這里也需要注意一下，為了配合 antd 的 upoad 控件，我們的 dto 如下
@Data
public?class?FileDTO?{private?String?name;private?String?status;private?String?url;private?String?thumbUrl;
}
服務器端源碼訪問
https://github.com/xiaotuwo/xiaotuwo-server
到這里就全部結束了，你學會了嗎？如果有任何問題，可以到 US3 自己的官方論壇提問?
https://uclub.ucloud.cn/invite/93
推薦文章
原創電子書歷時整整一年總結的?Java 面試 + Java 后端技術學習指南，這是本人這幾年及校招的總結，各種高頻面試題已經全部進行總結，按照章節復習即可，已經拿到了大廠offer。
原創思維導圖掃碼或者微信搜?程序員的技術圈子?回復?面試?領取原創電子書和思維導圖。
總結
以上是生活随笔為你收集整理的10 分钟使用 Spring Boot + Vue + Antd + US3 搭建自己的图床的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
