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