0%

JavaScript Sdk上传本地文件至七牛云

背景

后台管理页面需要增加上传本地视频到七牛云功能。使用七牛云官方客户端(Web端)JavaScript sdk

代码集成

前台js文件 uploadVideo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$.ajax({url: "/qiniu/upload/uptoken", success: (res) => initFileInput(res)})//请求后台接口获取上传token

let initFileInput = (res) => {
let token = res.uptoken;
let domain = res.domain;
let config = {
useCdnDomain: true,
region: qiniu.region.as0
};
let putExtra = {
fname: "",
params: {},
mimeType: null
};


$("#file1").change(function () {

let file = this.files[0];
let key = file.name;
//获取当前时间
let timestamp=new Date().getTime();
let keyValue = 'rizin/video/' + timestamp + '/' + key;
// 添加上传dom面板
let next = (response) => {
let total = response.total;
/*$(".speed").text("进度:" + total.percent + "% ");*/
$("#speed1").text("进度:" + total.percent + "% ");
}

// 设置next,error,complete对应的操作,分别处理相应的进度信息,错误信息,以及完成后的操作
let error = function(err) {
alert("上传出错")
};

let complete = function(res) {
sdDeal(res.key, domain);
};
let subObject = {
next: next,
error: error,
complete: complete
};
// 调用sdk上传接口获得相应的observable,控制上传和暂停
let observable = qiniu.upload(file, keyValue, token, putExtra, config);
//observable.subscribe(next);
observable.subscribe(subObject);
})

html文件

1
2
3
4
5
6
7
8
9
10
<div class="form-group">
<label class="col-sm-2 control-label"><font color="red">*</font>画質(普通)</label>
<div class="col-sm-4">
<input type="file" id="file1">
<input type="hidden" name="sd" id="sdhid" value="">
</div>
<div class="col-sm-2" style='overflow:hidden'>
<p class='speed' id="speed1"></p>
</div>
</div>

后台集成需要引入七牛云相关依赖,官方sdk都有
application.properties

1
2
3
4
5
6
###七牛云视频上传###
qiniu.accessKey=**************************
qiniu.secretKey=**************************
qiniu.vhost=http://xxx.com/
qiniu.zone=as0//区域
qiniu.bucket=xxx//空间名

UploadConfig.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@Component
@ConfigurationProperties(
prefix = "qiniu"
)
public class QiniuUploadConfig {
private String accessKey;
private String secretKey;
private String bucket;
private String vhost;

public String getAccessKey() {
return accessKey;
}

public void setAccessKey(String accessKey) {
this.accessKey = accessKey;
}

public String getSecretKey() {
return secretKey;
}

public void setSecretKey(String secretKey) {
this.secretKey = secretKey;
}

public String getBucket() {
return bucket;
}

public void setBucket(String bucket) {
this.bucket = bucket;
}

public String getVhost() {
return vhost;
}

public void setVhost(String vhost) {
this.vhost = vhost;
}
}

QiniuUploadController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Controller
@RequestMapping("/qiniu/upload")
public class QiniuUploadController {

@Resource
QiniuUploadConfig config;

@GetMapping("uptoken")
@ResponseBody
public JSONObject uptoken(@RequestParam Map<String, Object> params) throws AuthException {
JSONObject json = new JSONObject();
Auth auth = Auth.create(config.getAccessKey(), config.getSecretKey());
String upToken = auth.uploadToken(config.getBucket());
String domain = config.getVhost();
json.put("uptoken", upToken);
json.put("domain",domain);
return json;
}
}

大功告成!😄。

欣赏此文?求鼓励,求支持!