編寫前端代碼
到這里我們基礎環境就搭建完成了，下面就開始編寫前端的代碼。我們是以 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
服務器端環境準備
本文采用的是UCloud對象存儲產品 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\"})
@ResponseBody
public 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>
我們會發現配置文件里面除了文件的配置還有一套鑒黃的配置，對的這個地方不是本文的重點，但是圖床一定要有鑒黃的能力，具體的實現可以參考文章 通過UCloud AI內容審核UAI-Censor免費搭建鑒黃平臺教程
具體 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
三五互聯（35.com）是經工信部審批，持有ISP、云牌照、IDC、CDN全業務資質的正規老牌云服務商，自成立至今20余年專注于域名注冊、虛擬主機、云服務器、企業郵箱、企業建站等互聯網基礎服務！
公司自研的云計算平臺，以便捷高效、超高性價比、超預期售后等優勢占領市場，穩居中國接入服務商排名前三，為中國超過50萬網站提供了高速、穩定的托管服務！先后獲評中國高新技術企業、中國優秀云計算服務商、全國十佳IDC企業、中國最受歡迎的云服務商等稱號！
目前，三五互聯高性能云服務器正在進行特價促銷，最低僅需48元！
http://www.shinetop.cn/cloudhost/