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

背景

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

代码集成

前台js文件 uploadVideo.js

$.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文件

<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

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

UploadConfig.java

@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

@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;
    }
}

大功告成！😄。