1、腾讯对象存储
腾讯对象存储可以用来存储包括图片、视频和文档在内的各种文件，它提供了包括pc、移动端和网页端在内的多种应用，同时也针对主流编程语言推出了对应SDK，这里介绍如何与Java中Spring提供MultipartFile类整合。
1、引入依赖
关于spring的相关依赖就不再赘述，在maven的pom.xml文件中添加如下依赖：
<!--腾讯对象存储 版本根据实际情况确定-->
<dependency>
<groupId>com.qcloud</groupId>
<artifactId>cos_api</artifactId>
<version>5.6.8</version>
</dependency>
2、上传文件
在腾讯官方文档中提供了多种上传方式，包括本地文件上传和流上传。这里使用MultipartFile从前台接受文件，并不是本地文件，如果前一种方式需要先存储到本地再上传到腾讯云，还要根据情况是否删除刚存储的本地文件，所以推荐使用流进行上传。==这里使用图片上传为例==：
package com.woniu.movie.util;
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.model.ObjectMetadata;
import com.qcloud.cos.model.PutObjectResult;
import com.qcloud.cos.region.Region;
import org.springframework.web.multipart.MultipartFile;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.UUID;
/**
* 上传图片到腾讯对象存储
*/
public class TencentUploadUtil {
//存储客户端
private static COSClient cosClient;
// 指定要上传到的存储桶
private static final String BUCKET_NAME = "想要上传的存储桶名字";
//存储后图片网址
private static final String IMG_URl = "上传至对象存储后的网址，这里不包含文件名";
/*初始化存储对象各项参数*/
static {
// 1 初始化用户身份信息（secretId, secretKey）。
String secretId = "你的secretId";
String secretKey = "你的secretKey";
COSCredentials cred = new BasicCOSCredentials(secretId, secretKey);
// 2 设置 bucket 的区域, COS 地域的简称请参照
//https://cloud.tencent.com/document/product/436/6224
// clientConfig 中包含了设置 region, https(默认 http), 超时, 代理等 set 方法,
//使用可参见源码或者常见问题 Java SDK 部分。
Region region = new Region("ap-shanghai");
ClientConfig clientConfig = new ClientConfig(region);
// 3 生成 cos 客户端。
cosClient = new COSClient(cred, clientConfig);
}
/**
* 将图片对象存入腾讯对象存储服务器
*
* @param multipartFile 前端传来的图片文件
* @return 返回图片在腾讯云的访问路径
*/
public static String uploadImgToTencentCloud(MultipartFile multipartFile) throws IOException {
//使用multipartFile.getInputStream()获得输出流 这里需要强转一下类型
FileInputStream fileInputStream = (FileInputStream) multipartFile.getInputStream();
ObjectMetadata objectMetadata = new ObjectMetadata();
// 设置输入流长度 可以从MultipartFile中获取 单位是byte
objectMetadata.setContentLength(multipartFile.getSize());
//生成一个唯一的uuid作为上传后的文件名
UUID uuid = UUID.randomUUID();
//通过MultipartFile获取从前端传过来的图片名称
String fileName = multipartFile.getOriginalFilename();
//简单判断一下前端是否提交了文件
if (multipartFile.getSize() == 0 || fileName == null || "".equals(fileName)) {
return null;
}
//获取文件后缀即文件类型
String suffix = fileName.substring(fileName.lastIndexOf("."));
// 设置 Content type, 默认是 application/octet-stream
//这里是图片所以是image 后面类型由文件类型决定 常见的有png、jpg、jepg、gif等等
objectMetadata.setContentType("image/" + suffix.substring(1));
//将uuid和文件类型组合成新的文件名
String newFileName = uuid.toString() + suffix;
//将文件以新文件类型的方式上传至腾讯对象存储
PutObjectResult putObjectResult = cosClient.putObject(BUCKET_NAME, newFileName, fileInputStream, objectMetadata);
String etag = putObjectResult.getETag();
//关闭输入流
fileInputStream.close();
//将网站路径加文件组合起来 形成一个完整的可以访问的网址
return IMG_URl + newFileName;
}
}
2、基于jquery的选座系统
关于这个选座系统，网上有许多教程，这里主要讲一下如何重新选择作为的行列数
var sc = $('#seat_area').seatCharts({
//在这里不论是不是从数据查询出座位后生成座位，还是默认生成座位，在生成后，座位的排列就固定不变了
map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc'
],
})
如果想要修改座位的排列而且不刷新页面，需要对jquery.seat-charts.min.js的源码进行修改，
(function (e) {
e.fn.seatCharts = function (t) {
if (this.data("seatCharts")) {/*return this.data("seatCharts")*/
//在这里添加如下代码并屏蔽上面代码
var ary = t.legend.items;
ary.splice(0, ary.length);
this.empty();
}
这样座位列表可以随意生成了，不过由于每次生成会先清空原来座位区div内的所有内容，所以后面生成的座位列表内只有座位，像官网示例中的屏幕元素也会清除掉，可以使用
$("#seat_area").prepend("<div class='front'>屏幕</div>");
在重新生成之后添加屏幕进去
