一、OSS 获取服务端签名
我们后期还有可能调用发送短信的 API等,因此我们在项目中新建一个专门实现第三方服务的 module
创建完成之后添加对于 gulimall-common 的依赖,同时将 OSS 服务调出至此模块
然后将此模块注册到注册中心
在配置中心新建配置文件,把 OSS 的相关配置配置进去
使配置文件生效
其他配置:
排除 mybatis 的相关配置
获取 web 端签名的相关代码
package com.fancy.gulimall.thirdparty.controller;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClient;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;
@RestController
public class OssController {
@Resource
OSS ossClient;
@Value("${spring.cloud.alicloud.oss.endpoint}")
private String endpoint;
@Value("${spring.cloud.alicloud.oss.bucket}")
private String bucket;
@Value("${spring.cloud.alicloud.access-key}")
private String accessId;
@RequestMapping("/oss/policy")
public Map<String, String> policy() {
// 填写Bucket名称,例如examplebucket。
String bucket = "gulimall-hello--fancy";
// 填写Host地址,格式为https://bucketname.endpoint。
String host = "https://" + bucket + "." + "endpoint";
// 设置上传回调URL,即回调服务器地址,用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后,把文件上传信息通过此回调URL发送给应用服务器。
// String callbackUrl = "https://192.168.0.0:8888";
// 设置上传到OSS文件的前缀,可置空此项。置空后,文件将上传至Bucket的根目录下。
// 目录以日期进行命名
String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
String dir = format + "/";
// 创建ossClient实例。
Map<String, String> respMap = null;
try {
long expireTime = 30;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);
PolicyConditions policyConds = new PolicyConditions();
policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = ossClient.calculatePostSignature(postPolicy);
respMap = new LinkedHashMap<String, String>();
respMap.put("accessId", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", dir);
respMap.put("host", host);
respMap.put("expire", String.valueOf(expireEndTime / 1000));
// respMap.put("expire", formatISO8601Date(expiration));
} catch (Exception e) {
// Assert.fail(e.getMessage());
System.out.println(e.getMessage());
}
return respMap;
}
}
配置此服务的网关
测试服务:
二、前后端联调测试上传
将课件中的代码复制到组件里
组件相关更改
导入单文件上传模块
将 logo 文本框替换成文件上传按钮
将响应数据替换成 R 类型,便于前端接收
然后我们要开启阿里云 OSS的跨域访问
注意: 报 403 其实是前端的一处地方写错了。。。。
这里原本是 accessid,要改成 accessId
三、测试
四、前端表单校验
我们发现新增之后 logo 地址显示的是链接地址,这里我们要求自定义显示
修改这里即可
效果如图:
自定义校验规则:使用校验器 validator
我们来修改检查首字母以及排序校验的校验规则
代码如下:
firstLetter: [
{
validator: (rule, value, callback) => {
if (value == "") {
callback(new Error("首字母必须填写"));
} else if (!/^[a-zA-Z]$/.test(value)) {
callback(new Error("首字母必须a-z或者A-Z之间"));
} else {
callback();
}
},
trigger: "blur",
},
],
sort: [
{
validator: (rule, value, callback) => {
if (value == "") {
callback(new Error("排序字段必须填写"));
} else if (!Number.isInteger(value) || value < 0) {
callback(new Error("排序必须是一个大于等于0的整数"));
} else {
callback();
}
},
trigger: "blur",
},
],