背景
后台管理页面需要增加上传本地视频到七牛云功能。使用七牛云官方客户端(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)})
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; let next = (response) => { let total = response.total; $("#speed1").text("进度:" + total.percent + "% "); }
let error = function(err) { alert("上传出错") };
let complete = function(res) { sdDeal(res.key, domain); }; let subObject = { next: next, error: error, complete: complete }; let observable = qiniu.upload(file, keyValue, token, putExtra, config); 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: 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; } }
|
大功告成!😄。