感谢
感谢何大神的帮忙。之前仅了解阿里云oss，没有接触过七牛云，正好身边有位大神，节约时间就是效率，该功能大神帮我实现的。
上传七牛云效果
上传七牛云.gif
变化的代码图
image.png
1：开通七牛云对象存储（免费哦）
省略。。。
2：导入七牛云jdk包
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.2.0, 7.2.99]</version>
</dependency>
3：创建工具类
public class QiNiuUtil {
public static final String accessKey = "GoNJS_M_需要看你七牛云的后台";
public static final String secretKey = "7idgiYtHviockTDTjnYT-OU需要看你七牛云的后台";
public static final String bucket = "wechat-task";
public static String getNormalUploadToken(){
Auth auth = Auth.create(accessKey, secretKey);
return auth.uploadToken(bucket);
}
}
4添加Controller七牛云获取token的参数
@RestController
@RequestMapping("upload")
public class UpLoadController {
@RequestMapping(value = "getQiNiuUploadToken",method = RequestMethod.GET)
public ResponseData getQiNiuUploadToken(){
return ResponseData.success(QiNiuUtil.getNormalUploadToken());
}
}
导入jquery.js 和qiniu-2.5.js
导入js
_header添加布局&js代码
<li class="layui-nav-item" lay-unselect>
<input type="file" onchange="change()" id="upload" />
</li>
image.png
js
<script>
function change(){
console.log('文件选中');
var f = document.getElementById("upload");
var file = f.files[0];
console.log(file);
uploadImageFile(file, new Date().getTime());
}
function uploadImageFile(file, key) {
let type = file.type;
let indexOf = type.indexOf("/");
let suf = "";
if (indexOf !== -1){
suf = "." + type.substring(indexOf + 1);
}
let fileName = key + suf;
console.log('上传的图片地址 ==> ' + fileName);
$.ajax({
url: Feng.ctxPath + "/upload/getQiNiuUploadToken",
method: "GET",
success: function(result){
console.log('七牛云token结果 ==> ' + result)
uploadQiNiu(result.data,file,fileName)
}
});
};
function uploadQiNiu(token,file,fileName){
console.log('七牛云token ==> ' + token);
let observable = qiniu.upload(file, fileName, token);
let observer = { //设置上传过程的监听函数
next(result) { //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
console.log(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
},
error(err) { //失败后
console.log("上传失败:" + err.message);
},
complete(res) { //成功后
console.log('上传成功 ==> ' + JSON.stringify(res))
alert('http://q349xx31l.bkt.clouddn.com/' + res.key)
}
};
observable.subscribe(observer);
}
</script>
image.png
index.html中导入js
<script type="text/javascript" src="${ctxPath}/assets/common/js/jquery-3.4.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/qiniu-2.5.js"></script>
Android端上传文件
image.png
七牛云每个测试域名自创建起30个自然日后系统会自动回收
如果绑定自定的域名
image.png
自定义域名设置
域名解析添加设置
这里我采用了阿里云上申请的域名
image.png
image.png
解析的域名记录来自七牛云中
image.png
下载文件看看
http://qny.51wxfd.club/1588072917561.png
