Приходите и собирайте шерсть:Легкое облачное хранилище объектов
С широким распространением социальных сетей и платформ для обмена изображениями услуги хостинга изображений (т. е. услуги хостинга изображений) стали незаменимой частью разработчиков и создателей контента. Image Bed позволяет пользователям загружать изображения в облачное хранилище и получать к ним доступ через URL-адреса, что уменьшает занимаемое пространство на устройстве пользователя и обеспечивает эффективные методы управления изображениями и доступа к ним. Облегченное объектное хранилище (COS) Tencent Cloud предоставляет разработчикам простое и эффективное решение для графического стола. В этой статье рассказывается, как использовать Tencent Cloud COS для создания полноценной онлайн-функции графического стола.
Служба хостинга изображений — это служба, которая хранит изображения на облачном сервере и предоставляет ссылки для доступа к изображениям через протоколы HTTP или HTTPS. Основные функции Picture Bed включают в себя: Благодаря Picture Bed пользователям больше не нужно хранить изображения на локальном сервере, что значительно улучшает масштабируемость системы и скорость доступа к изображениям.
Tencent Cloud COS (Cloud Object Storage) — это служба облачного хранения, предоставляемая Tencent Cloud, которая подходит для хранения больших неструктурированных данных, таких как изображения, видео, журналы и т. д. Он имеет следующие характеристики:
Полная функция онлайн-кровати для рисования должна отвечать следующим требованиям: Прежде чем реализовать эти требования, нам необходимо провести некоторые базовые приготовления.
Сначала зайдите в Официальный сайт Tencent Cloud Зарегистрируйте учетную запись Tencent Cloud. Если у вас уже есть учетная запись, вы можете войти в нее напрямую.
Чтобы использовать Tencent Cloud COS в проекте Java, вам необходимо импортировать SDK Tencent Cloud. Вот как можно добавить зависимости.
существовать pom.xml
Добавьте в файл следующие зависимости:
<dependency>
<groupId>com.qcloud</groupId>
<artifactId>cos_api</artifactId>
<version>5.6.54</version>
</dependency>
существовать application.properties
или application.yml
Настройка облака Tencent COS Связанные параметры:
tencent:
cos:
secretId: xxxxxxx
secretKey: xxxxxxxxxxxxxxxxx
region: ap-nanjing
bucketName: number-89757-1259242531
Во-первых, нам нужно создать класс сущности Image
Чтобы сохранить информацию об изображении на фотокровати, включая URL-адрес, имя файла, размер файла и т. д.
package com.example.demo.entity;
// ответ DTO
public class ResponseDto {
private String url;
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
Далее мы создаем CosService
класс для инкапсуляции всего, что связано с Tencent Cloud COS Связанные операции включают такие функции, как загрузка, удаление и получение файлов.
package com.example.demo.service;
import com.example.demo.controller.CosImageController;
import com.example.demo.entity.ResponseDto;
import com.qcloud.cos.COSClient;
import com.qcloud.cos.ClientConfig;
import com.qcloud.cos.auth.BasicCOSCredentials;
import com.qcloud.cos.auth.COSCredentials;
import com.qcloud.cos.region.Region;
import com.qcloud.cos.model.*;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.net.URL;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.List;
@Service
public class CosService {
@Value("${tencent.cos.secretId}")
private String secretId;
@Value("${tencent.cos.secretKey}")
private String secretKey;
@Value("${tencent.cos.region}")
private String region;
@Value("${tencent.cos.bucketName}")
private String bucketName;
/**
* Загрузить файлы в COS
*
* @param file Загруженные файлы
* @param key загрузить в COS ключ объекта
* @return Документальный фильм URL адрес
* @throws IOException
*/
public String uploadFile(File file, String key) throws IOException {
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
ClientConfig clientConfig = new ClientConfig(new Region(region));
COSClient cosClient = new COSClient(cred, clientConfig);
// // создать запрос на загрузку
// PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, file);
// // Выполнить загрузку
// cosClient.putObject(putObjectRequest);
FileInputStream fileInputStream = new FileInputStream(file);
PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, key, fileInputStream, new ObjectMetadata());
cosClient.putObject(putObjectRequest);
// генерировать Документальный фильм URL адрес
return "https://" + bucketName + ".cos." + region + ".myqcloud.com/" + key;
}
/**
* удалить COS файлы в
*
* @param key документключ объекта
*/
public void deleteFile(String key) {
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
ClientConfig clientConfig = new ClientConfig(new Region(region));
COSClient cosClient = new COSClient(cred, clientConfig);
cosClient.deleteObject(bucketName, key);
}
/**
* получать COS серединавсе Документальный Список фильмов
*
* @return список файлов
*/
public List<ResponseDto> listFiles() {
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
ClientConfig clientConfig = new ClientConfig(new Region(region));
COSClient cosClient = new COSClient(cred, clientConfig);
ListObjectsRequest listObjectsRequest = new ListObjectsRequest()
.withBucketName(bucketName)
.withPrefix(""); // Префиксы могут быть установлены для фильтрации файлов.
ObjectListing objectListing = cosClient.listObjects(listObjectsRequest);
List<COSObjectSummary> aa = objectListing.getObjectSummaries();
List<ResponseDto> result = new ArrayList<>();
for (COSObjectSummary vv :aa){
ResponseDto dd = new ResponseDto();
GeneratePresignedUrlRequest req = new GeneratePresignedUrlRequest(bucketName, vv.getKey());
// req.setExpiration(new Date(System.currentTimeMillis() + 3600 * 1000)); // Установите период действия URL-адреса на 1 час.
URL signedUrl = cosClient.generatePresignedUrl(req);
dd.setUrl(signedUrl.toString());
result.add(dd);
}
return result;
}
/**
* Конвертировать MultipartFile для File объект
*
* @param file загружено MultipartFile документ
* @return Конвертироватьпозже File объект
* @throws IOException
*/
public File convertMultiPartToFile(MultipartFile file) throws IOException {
File convFile = new File(file.getOriginalFilename());
file.transferTo(convFile);
return convFile;
}
/**
* закрытие COS клиент
*/
public void shutdown() {
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
ClientConfig clientConfig = new ClientConfig(new Region(region));
COSClient cosClient = new COSClient(cred, clientConfig);
cosClient.shutdown();
}
}
контроллер ImageController
Обработка запросов внешнего интерфейса, таких как загрузка изображений, размещение изображений, удаление изображений и т. д.
package com.example.demo.controller;
import com.example.demo.entity.ResponseDto;
import com.example.demo.service.CosService;
import com.qcloud.cos.model.COSObjectSummary;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.http.ResponseEntity;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardCopyOption;
import java.util.List;
@Controller
public class CosImageController {
@Autowired
private CosService cosService; // вызов COS Служить
// Хранение изображенийпуть private static final String UPLOAD_DIR = "src/main/resources/static/uploads/";
@GetMapping("/")
public String ocrPage() {
return "cos"; // Вернуться к просмотру страницы загрузки
}
// Загрузить фотографии
@PostMapping("/image/upload")
public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
// Воля Загруженные файлы Сохранить в COS
// Убедитесь, что каталог загрузки сохранен в существующем состоянии.
Path uploadPath = Paths.get(UPLOAD_DIR);
if (!Files.exists(uploadPath)) {
Files.createDirectories(uploadPath);
}
// получатьдокументвходной потокихранилищедокумент
Path filePath = uploadPath.resolve(file.getOriginalFilename());
try (InputStream inputStream = file.getInputStream()) {
Files.copy(inputStream, filePath, StandardCopyOption.REPLACE_EXISTING);
}
try {
String fileName = System.currentTimeMillis() + "_" + file.getOriginalFilename();
// String fileUrl = cosService.uploadFile(convertMultiPartToFile(file), fileName);
String fileUrl = cosService.uploadFile(filePath.toFile(), fileName);
System.out.printf(fileUrl);
} catch (Exception e) {
e.printStackTrace();
}
return "redirect:/";
}
// получатьужезагруженокартинасписок
@GetMapping("/image/list")
@ResponseBody
public List<ResponseDto> getImageList() {
// Здесь предполагается, что изображение было сохранено URL и ID
List<ResponseDto> sss = cosService.listFiles();
return sss; // Вы можете получить данные из базы данных COS получать информацию об изображении
}
// удалитькартина
@DeleteMapping("/image/delete/{id}")
public ResponseEntity<?> deleteImage(@PathVariable String id) {
// в соответствии с ID удалитьдокумент
cosService.deleteFile(id); // ты можешь в соответствии сдокумент ID от COS удалитьдокумент
return ResponseEntity.ok().build();
}
// Вспомогательные методы:Конвертировать MultipartFile для File
private File convertMultiPartToFile(MultipartFile file) throws IOException {
File convFile = new File(file.getOriginalFilename());
file.transferTo(convFile);
return convFile;
}
// Информация об изображении DTO
public static class ImageDto {
private String id;
private String url;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
}
Интерфейсная часть реализует пользовательский интерфейс платформы изображений и поддерживает загрузку и отображение изображений.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изображение управления кроватью</title>
<!-- представлять Bootstrap стиль -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.image-preview {
max-width: 100px;
max-height: 100px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="mb-4">Изображение управления кроватью</h1>
<!-- Загрузка изображениячасть -->
<div class="mb-4">
<h3>Загрузить фотографии</h3>
<form action="/image/upload" method="post" enctype="multipart/form-data">
<input type="file" class="form-control" name="file" required>
<button type="submit" class="btn btn-primary">загрузить</button>
</form>
</div>
<!-- ужезагруженокартинасписок -->
<h3>уже Загрузить фотографии</h3>
<div id="imageList" class="row"></div>
</div>
<!-- представлять jQuery и Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// нагрузкаужезагруженокартинасписок
function loadImageList() {
$.ajax({
url: '/image/list', // Серверный интерфейс для получения списка изображений
type: 'GET',
success: function (images) {
$('#imageList').empty(); // Очистить текущий список
images.forEach(function (image) {
$('#imageList').append(`
<div class="col-md-3 mb-3">
<div class="card">
<img src="${image.url}" class="card-img-top" alt="Image" style="height: 150px; object-fit: cover;">
<div class="card-body">
<a href="${image.url}" target="_blank" class="btn btn-primary btn-sm">Проверять</a>
<button class="btn btn-danger btn-sm delete-btn" data-id="${image.id}">удалить</button>
</div>
</div>
</div>
`);
});
},
error: function (xhr, status, error) {
alert("Не удалось загрузить список изображений:" + error);
}
});
}
// удалитькартина
$(document).on('click', '.delete-btn', function () {
var imageId = $(this).data('id');
$.ajax({
url: '/image/delete/' + imageId, // задняя частьудалитькартинаинтерфейс
type: 'DELETE',
success: function () {
loadImageList(); // Обновить список изображений
},
error: function (xhr, status, error) {
alert("удалитьнеудача:" + error);
}
});
});
// Загрузить список изображений во время инициализации
loadImageList();
</script>
</body>
</html>
Мы использовали Spring Boot для создания серверной части, Tencent Cloud COS в качестве службы хранения и реализовали такие функции, как загрузка, удаление и отображение изображений. Через интерфейсную HTML-страницу мы реализуем функции загрузки и просмотра изображений. Таким образом, мы можем не только внедрить эффективную и надежную систему хранения изображений, но и в полной мере использовать преимущества облачного хранилища Tencent Cloud для повышения производительности и масштабируемости системы.
конечно,существуют в ходе фактического процесса разработки проекта,мы также можемиспользовать Тенсент Облакообъектхранилище Эффективно облегчить Легкое приложение Служить Функциональное давление устройства,Улучшите производительность и стабильность приложения. COS обеспечивает высокую надежность и высокую доступность бюджетных решений для хранения данных.,Подходит для сценариев применения любого размера.
Вот и все, братья,Легкое приложение Служить инструмент*Распродажа ограничена по времени,Всего 28 в году! ! !