Spring Boot网页上传图片到腾讯云存储服务后在网页显示图片

情景:Spring Boot项目,在网页选择对应图片上传到腾讯云存储服务后在网页上显示

环境:IDEA版本2017.3.1 x64, JDK1.8, SpringBoot2.1.1,thymeleaf3.0.11

一、在腾讯云开通云存储服务,腾讯云网址https://console.cloud.tencent.com/

  • 进入对象存储服务
    在这里插入图片描述
  • 创建存储桶,存储桶相当于电脑中的文件夹,用来存放你的文件,如果只是用来简单存储非隐私图片,访问权限可以选择共有读写(后续上传图片会需要密钥,不用担心其他人会随意写入图片)

在这里插入图片描述

二、Spring Boot中在pom.xml中添加腾讯云jar包

<!-- https://mvnrepository.com/artifact/com.qcloud/cos_api -->
<dependency>
     <groupId>com.qcloud</groupId>
     <artifactId>cos_api</artifactId>
     <version>5.4.10</version>
     <exclusions>
         <exclusion>
             <groupId>org.slf4j</groupId>
             <artifactId>slf4j-log4j12</artifactId>
         </exclusion>
     </exclusions>
</dependency>

三、编写上传文件工具类

  • 工具类需要腾讯云api的密钥,先来到腾讯云的访问管理,点击api密钥管理即可查看密钥,密钥在下面的工具类中需要使用到。在这里插入图片描述
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.exception.CosClientException;
import com.qcloud.cos.exception.CosServiceException;
import com.qcloud.cos.model.*;
import com.qcloud.cos.region.Region;
import com.qcloud.cos.transfer.Transfer;
import com.qcloud.cos.transfer.TransferManager;
import com.qcloud.cos.transfer.TransferProgress;
import com.qcloud.cos.transfer.Upload;

import java.io.File;
import java.util.Random;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

/**
 * 腾讯云对象存储
 * 
 */
public class TencentCOS {

	// 此处填写的存储桶名称
	private static final String bucketName = "xxxx";
	// secretId
	private static final String secretId = "xxxx";
	// secretKey
	private static final String secretKey = "xxxx";

	// 1 初始化用户身份信息(secretId, secretKey,可在腾讯云后台中的API密钥管理中查看!
	private static COSCredentials cred = new BasicCOSCredentials(secretId,secretKey);

	// 2 设置bucket的区域, COS地域的简称请参照
	// https://cloud.tencent.com/document/product/436/6224,根据自己创建的存储桶选择地区
	private static ClientConfig clientConfig = new ClientConfig(new Region("ap-guangzhou"));


	/**
	 * 简单文件上传, 最大支持 5 GB, 适用于小文件上传, 建议 20 M 以下的文件使用该接口 大文件上传请参照 API 文档高级 API 上传
	 * 
	 * @param localFile
	 */
	public static String uploadfile(File localFile) throws CosClientException, CosServiceException {

		// 生成cos客户端
		COSClient cosclient = new COSClient(cred, clientConfig);
		String fileName = localFile.getName();
		try {	
			String substring = fileName.substring(fileName.lastIndexOf("."));
			Random random = new Random();
			// 指定要上传到 COS 上的路径
			fileName = "images/"+random.nextInt(10000) + System.currentTimeMillis() + substring;
			PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, fileName , localFile);
			PutObjectResult putObjectResult = cosclient.putObject(putObjectRequest);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			// 关闭客户端(关闭后台线程)
			cosclient.shutdown();
		}
		return fileName;
	}
	
	
	/**
     * 
     * @Title: downFile
     * @Description: 下载文件
     * @return
     */
    public static void downFile() {
    	// 生成cos客户端
    	COSClient cosclient = new COSClient(cred, clientConfig);
    	//要下载的文件路径和名称
        String key = "down/demo1.jpg";
     	// 指定文件的存储路径
        File downFile = new File("src/test/resources/mydown.txt");
        // 指定要下载的文件所在的 bucket 和对象键
        GetObjectRequest getObjectRequest = new GetObjectRequest(bucketName, key);
        ObjectMetadata downObjectMeta = cosclient.getObject(getObjectRequest, downFile);
    }
	

	/**
	 * 删除文件
	 * 
	 * @param key
	 */
	public static void deletefile(String key) throws CosClientException, CosServiceException {
		// 生成cos客户端
		COSClient cosclient = new COSClient(cred, clientConfig);
		// 指定要删除的 bucket 和路径
		cosclient.deleteObject(bucketName, key);
		// 关闭客户端(关闭后台线程)
		cosclient.shutdown();
	}
}

四、编写控制类调用工具类上传文件

@Controller
public class CosController {

    /**
     * 把文件上传到腾讯云存储服务器
     * @param multfile
     * @return
     * @throws Exception
     */
     @RequestMapper("/uploadImage")
    public String upload(@RequestParam("file") MultipartFile multfile,Map<String,Object> map)throws Exception{
        // 获取文件名
        String fileName = multfile.getOriginalFilename();
        // 获取文件后缀
        String prefix=fileName.substring(fileName.lastIndexOf("."));
        // 用uuid作为文件名,防止生成的临时文件重复
        final File excelFile = File.createTempFile("imagesFile-"+System.currentTimeMillis(), prefix);
        // 将MultipartFile转为File
        multfile.transferTo(excelFile);

        //调用腾讯云工具上传文件
 		String fileName = TencentCOS.uploadfile(excelFile);

        //程序结束时,删除临时文件
        deleteFile(excelFile);
		//存入图片名称,用于网页显示
		map.put("imageName",fileName);
        //返回图片名称
        return "index";
    }

    /**
     * 删除临时文件
     * @param files
     */
    private void deleteFile(File... files) {
        for (File file : files) {
            if (file.exists()) {
                file.delete();
            }
        }
    }
}

五、网页显示(网页渲染引擎为thymeleaf,如果是jsp渲染则可以用el表达式获取值)

  • 网页顶部添加命名空间
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  • 渲染图片
<img th:src="'存储桶的请求访问域名'+${imageName}" />

在这里插入图片描述
请求域名如图所示

${imageName}是图片的路径和名称,也就是map中的imageName中的数据,请求域名和图片的路径就是图片的访问地址了。
在这里插入图片描述

效果如图:在这里插入图片描述

参考文档:https://cloud.tencent.com/document/product/436/10199

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值