投票小程序之使用OSS上传图片、视频、文档实现过程

SpringBoot框架中各层解释如下

View层：Controller层（响应用户请求）

Service层：接口及接口实现类

DAO层：Mapper层（抽象类：xxxMapper.java文件，具体实现在xxxMapper.xml）

Model层：实体类：xxx.java

VO：View Object，视图层，其作用是将指定页面的展示数据封装起来

DTO：Data Transfer Object，数据传输对象

DO：Domain Object，领域对象

PO：Persistent Object，持久化对象

注册阿里云账号，开通OSS存储

OSS存储流程介绍

官方文档地址：概述 - 对象存储 OSS - 阿里云

oss存储管理服务端实现

在vote-manage工程的pom.xml文件中，添加依赖

			<dependency>
				<groupId>com.aliyun.oss</groupId>
				<artifactId>aliyun-sdk-oss</artifactId>
				<version>2.8.2</version>
			</dependency>

在vote-manage工程的vote-web模块中的application.yaml文件中添加如下配置

oss:
  endpoint: https://oss-cn-hangzhou.aliyuncs.com # oss对外服务的访问域名，实际根据你选择的地区域名
  accessKeyId: 用户标识 # 访问身份验证中用到用户标识
  accessKeySecret: 字符串的密钥 # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
  bucketName: mtbox # oss的存储空间
  policy:
    expire: 300 # 签名有效期(S)
  maxSize: 10 # 上传文件大小(M)
  callback: http://域名:8080/aliyun/oss/callback # 文件上传成功后的回调地址
  dir:
    prefix: vote/images/ # 上传文件夹路径前缀

在vote-manage工程的vote-common模块中的src\main\java\com\dliberty\vote\common\config类文件中添加，用于配置OSS的连接客户端OSSClient

/**
 * oss配置文件
 */
@Configuration
public class OssConfig {
    @Value("${oss.endpoint}")
    private String ALIYUN_OSS_ENDPOINT;
    @Value("${oss.accessKeyId}")
    private String ALIYUN_OSS_ACCESSKEYID;
    @Value("${oss.accessKeySecret}")
    private String ALIYUN_OSS_ACCESSKEYSECRET;
    @Bean
    public OSSClient ossClient(){
        return new OSSClient(ALIYUN_OSS_ENDPOINT,ALIYUN_OSS_ACCESSKEYID,ALIYUN_OSS_ACCESSKEYSECRET);
    }
}

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\dto\目录下添加OSS上传策略封装对象OssPolicyResult类

/**
 * 获取OSS上传文件授权返回结果 
 */
public class OssPolicyResult {
	@ApiModelProperty("访问身份验证中用到用户标识")
	private String accessKeyId;
	@ApiModelProperty("用户表单上传的策略,经过base64编码过的字符串")
	private String policy;
	@ApiModelProperty("对policy签名后的字符串")
	private String signature;
	@ApiModelProperty("上传文件夹路径前缀")
	private String dir;
	@ApiModelProperty("oss对外服务的访问域名")
	private String host;
	@ApiModelProperty("上传成功后的回调设置")
	private String callback;
	@ApiModelProperty("上传文件名")
	private String fileName;

	public String getAccessKeyId() {
		return accessKeyId;
	}

	public void setAccessKeyId(String accessKeyId) {
		this.accessKeyId = accessKeyId;
	}

	public String getPolicy() {
		return policy;
	}

	public void setPolicy(String policy) {
		this.policy = policy;
	}

	public String getSignature() {
		return signature;
	}

	public void setSignature(String signature) {
		this.signature = signature;
	}

	public String getDir() {
		return dir;
	}

	public void setDir(String dir) {
		this.dir = dir;
	}

	public String getHost() {
		return host;
	}

	public void setHost(String host) {
		this.host = host;
	}

	public String getCallback() {
		return callback;
	}

	public void setCallback(String callback) {
		this.callback = callback;
	}

	public String getFileName() {
		return fileName;
	}

	public void setFileName(String fileName) {
		this.fileName = fileName;
	}
	
}

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\service目录下添加OSS业务层接口OssService类

/**
 * oss上传管理Service
 */
public interface OssService {
	/**
	 * oss上传策略生成
	 */
	OssPolicyResult policy();


}

在vote-manage工程的vote-app模块中的src\main\java\com\dliberty\vote\app\impl目录下添加OSS业务层实现OssServiceImpl类

/**
 * oss上传管理Service实现类
 * 
 */
@Service
public class OssServiceImpl implements OssService {

	private static final Logger LOGGER = LoggerFactory.getLogger(OssServiceImpl.class);
	@Value("${oss.policy.expire}")
	private int ALIYUN_OSS_EXPIRE;
	@Value("${oss.maxSize}")
	private int ALIYUN_OSS_MAX_SIZE;
	@Value("${oss.callback}")
	private String ALIYUN_OSS_CALLBACK;
	@Value("${oss.bucketName}")
	private String ALIYUN_OSS_BUCKET_NAME;
	@Value("${oss.endpoint}")
	private String ALIYUN_OSS_ENDPOINT;
	@Value("${oss.dir.prefix}")
	private String ALIYUN_OSS_DIR_PREFIX;

	@Autowired
	private OSSClient ossClient;

 /**
	 * 签名生成
	 */
	@Override
	public OssPolicyResult policy() {
		OssPolicyResult result = new OssPolicyResult();
		// 存储目录
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		String dir = ALIYUN_OSS_DIR_PREFIX+sdf.format(new Date());
		// 签名有效期
		long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;
		Date expiration = new Date(expireEndTime);
		// 文件大小
		long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 * 1024;

		// 提交节点
		String action = "http://" + ALIYUN_OSS_BUCKET_NAME + "." + ALIYUN_OSS_ENDPOINT;
		try {
			PolicyConditions policyConds = new PolicyConditions();
			policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);
			policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
			String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
			byte[] binaryData = postPolicy.getBytes("utf-8");
			String policy = BinaryUtil.toBase64String(binaryData);
			String signature = ossClient.calculatePostSignature(postPolicy);
		result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());
			result.setPolicy(policy);
			result.setSignature(signature);
			result.setDir(dir);
			result.setHost(action);
		} catch (Exception e) {
			LOGGER.error("签名生成失败", e);
		}
		return result;
	}


}

在vote-manage工程的vote-web模块中的src\main\java\com\dliberty\vote\web\controller目录下添加OssController定义接口类

/**
 * Oss相关操作接口 .
 */
@RestController
@Api(tags = "OssController", value = "Oss管理")
@RequestMapping("/aliyun/oss")
public class OssController {
	@Autowired
	private OssService ossService;

	@ApiOperation(value = "oss上传签名生成")
	@GetMapping("/policy")
	public Response<OssPolicyResult> policy() {
		OssPolicyResult result = ossService.policy();
		return Response.ofData(result);
	}

}

设置上传回调

在vote-manage工程的vote-web模块中的\src\main\resources的application.yaml文件中添加回调配置

callback: http://外网ip或域名:8080/aliyun/oss/callback # 文件上传成功后的回调地址

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\dto\目录下对应OssPolicyResult类的回调设置方法

	@ApiModelProperty("上传成功后的回调设置")
	private String callback;

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\dto\目录下添加OssCallbackParam类

作用：当OSS上传成功后，会根据该配置参数来回调对应接口

/**
 * oss上传成功后的回调参数
 */
public class OssCallbackParam {
	@ApiModelProperty("请求的回调地址")
	private String callbackUrl;
	@ApiModelProperty("回调是传入request中的参数")
	private String callbackBody;
	@ApiModelProperty("回调时传入参数的格式，比如表单提交形式")
	private String callbackBodyType;

	public String getCallbackUrl() {
		return callbackUrl;
	}

	public void setCallbackUrl(String callbackUrl) {
		this.callbackUrl = callbackUrl;
	}

	public String getCallbackBody() {
		return callbackBody;
	}

	public void setCallbackBody(String callbackBody) {
		this.callbackBody = callbackBody;
	}

	public String getCallbackBodyType() {
		return callbackBodyType;
	}

	public void setCallbackBodyType(String callbackBodyType) {
		this.callbackBodyType = callbackBodyType;
	}
}

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\dto\目录下添加OssCallbackResult类

作用：回调接口中返回的数据对象

/**
 * oss上传文件的回调结果 
 */
public class OssCallbackResult {
	@ApiModelProperty("文件名称")
	private String filename;
	@ApiModelProperty("文件大小")
	private String size;
	@ApiModelProperty("文件的mimeType")
	private String mimeType;
	@ApiModelProperty("图片文件的宽")
	private String width;
	@ApiModelProperty("图片文件的高")
	private String height;
｝

在vote-manage工程的vote-api模块中的src\main\java\com\dliberty\vote\api\service目录下 OssService类添加回调接口

	/**
	 * oss上传成功回调
	 */
	OssCallbackResult callback(HttpServletRequest request);

在vote-manage工程的vote-app模块中的src\main\java\com\dliberty\vote\app\impl目录下实现OssServiceImpl类添加回调实现

实际类添加参数属性

	@Value("${oss.bucketName}")
	private String ALIYUN_OSS_BUCKET_NAME;
	@Value("${oss.endpoint}")
	private String ALIYUN_OSS_ENDPOINT;

添加实现方法

	@Override
	public OssCallbackResult callback(HttpServletRequest request) {
		OssCallbackResult result= new OssCallbackResult();
		String filename = request.getParameter("filename");
		filename = "http://".concat(ALIYUN_OSS_BUCKET_NAME).concat(".").concat(ALIYUN_OSS_ENDPOINT).concat("/").concat(filename);
		result.setFilename(filename);
		result.setSize(request.getParameter("size"));
		result.setMimeType(request.getParameter("mimeType"));
		result.setWidth(request.getParameter("width"));
		result.setHeight(request.getParameter("height"));
		return result;
	}

原有签名生成policy实现方法，添加回调处理相关代码

	/**
	 * 签名生成
	 */
	@Override
	public OssPolicyResult policy() {
		OssPolicyResult result = new OssPolicyResult();
		// 存储目录
		SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
		String dir = ALIYUN_OSS_DIR_PREFIX+sdf.format(new Date());
		// 签名有效期
		long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;
		Date expiration = new Date(expireEndTime);
		// 文件大小
		long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 * 1024;
		// 回调
		OssCallbackParam callback = new OssCallbackParam();
		callback.setCallbackUrl(ALIYUN_OSS_CALLBACK);
		callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
		callback.setCallbackBodyType("application/x-www-form-urlencoded");
		// 提交节点
		//String action = "http://" + ALIYUN_OSS_BUCKET_NAME + "." + ALIYUN_OSS_ENDPOINT;
		String action = "http://image.dliberty.com";
		try {
			PolicyConditions policyConds = new PolicyConditions();
			policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);
			policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
			String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
			byte[] binaryData = postPolicy.getBytes("utf-8");
			String policy = BinaryUtil.toBase64String(binaryData);
			String signature = ossClient.calculatePostSignature(postPolicy);
			
			String callbackData = BinaryUtil.toBase64String(JSONObject.toJSON(callback).toString().getBytes("utf-8"));
			// 返回结果
			result.setAccessKeyId(ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());
			result.setPolicy(policy);
			result.setSignature(signature);
			result.setDir(dir);
			result.setCallback(callbackData);
			result.setHost(action);
			
			String key = "doc_file" + System.currentTimeMillis();
			String fileName = Base64Utils.encodeToString(key.getBytes());
			result.setFileName(fileName);
			
			
		} catch (Exception e) {
			LOGGER.error("签名生成失败", e);
		}
		return result;
	}

在vote-manage工程的vote-web模块中的src\main\java\com\dliberty\vote\web\controller目录下 OssController类添加回调接口

	@ApiOperation(value = "oss上传成功回调")
	@PostMapping("callback")
	public Response<OssCallbackResult> callback(HttpServletRequest request) {
		OssCallbackResult ossCallbackResult = ossService.callback(request);
		return Response.ofData(ossCallbackResult);
	}

oss上传管理前端实现

使用Vue构建上传页面

在项目如下几个文件使用到：

异步获取签名

在vote\src\api\oss.js文件中，添加如下方法：

import request from '@/utils/request'
export function policy() {
  return request({
    url:'/aliyun/oss/policy',
    method:'get',
  })
}

单文件上传singleUpload.vue组件使用

定义组件

使用组件

其它几个应该场景：上传视频、图片、文档使用方法同上，大同小异，详细查看源码。

oss上传管理小程序端实现

在小程序前端工程中如下几个文件使用到：

异步获取签名

在\vote-weixin\vote-weixin\vote\api\oss.js文件中，添加如下方法：

export function policy() {
  return request.get("aliyun/oss/policy", {});
}

uploadVideo.js文件定义函数uploadDetailVideo

uploadDetailVideo.wxml文件，<view>uploadVideo.js.js中的uploadDetailVideo函数

其它几个应该场景：图片、文档使用方法同上，大同小异，详细查看源码。

长征号

投票小程序之使用OSS上传图片、视频、文档实现过程

SpringBoot框架中各层解释如下

注册阿里云账号，开通OSS存储

OSS存储流程介绍

oss存储管理服务端实现

设置上传回调

oss上传管理前端实现

使用Vue构建上传页面

oss上传管理小程序端实现

相关文章

python 字符串转为十六进制字符串

tableau可视化函数使用案例（六十七）-如何用Tableau获取数据并对数据进行操作？

盘点前端HTML基础知识

图标字体使用

陵县python培训教学视频

git安装mmdetection

发表评论

Copyright Your WebSite.Some Rights Reserved.

长征号

投票小程序之使用OSS上传图片、视频、文档实现过程

SpringBoot框架中各层解释如下

注册阿里云账号，开通OSS存储

OSS存储流程介绍

oss存储管理服务端实现

设置上传回调

oss上传管理前端实现

使用Vue构建上传页面

oss上传管理小程序端实现

相关文章

python 字符串转为十六进制字符串

tableau可视化函数使用案例（六十七）-如何用Tableau获取数据并对数据进行操作？

盘点前端HTML基础知识

图标字体使用

陵县python培训教学视频

git安装mmdetection

发表评论 取消回复

Copyright Your WebSite.Some Rights Reserved.

发表评论