前端根据七牛token上传资源到七牛云

需求:

项目中涉及到上传图片或者视频到七牛云,如果提交二进制数据给后台上传,经过试验体验不是很好,文件小还好,文件一大整个过程就会很慢,所以需要前端直接上传到七牛,然后把七牛的资源key提交给后端就可以,后端只需要提供七牛的上传token即可.

第一步:获取七牛token

这个步骤直接找后端人员要接口,他会返回一个很长的七牛上传token

第二步:前端代码实现

引入qiniu.min.js,我这里直接使用七牛的cdn引入

<script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script>

前端完整上传代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    </head>
	<body>
        <input type="file" name="image" id="file">
        <input type="button" id="upload" value="upload">
	</body>
    <script src="js/jquery.min.js"></script>
    <script src="http://jssdk-v2.demo.qiniu.io/dist/qiniu.min.js"></script>
    <script>
        // 七牛token
        var qiniuToken = 'RmRBqO9olxxPJ3dNKaq-9YxOqS46vZj-AMTGc-o2:ENiL_XazSwOFYClV20BjTmr_M5E=:eyJzY29wZ7I6InlvdWfYW9pdCIsImRlYWRsaW5lIjoxNTY3NzczMDMxfQ=='
        $("#upload").click(function(){
            var obj = $("#file");
            // 获取文件在本地的绝对路径 C:\fakepath\cover.jpg
            var fileName = obj.val();
            // 获取文件后缀名 .jpg
            var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length)
            // 获取文件对象
            var file = obj.get(0).files[0]
            // 获取文件大小 单位KB
            var size = (file.size / 1024).toFixed(2)

            // 设置上传的七牛key 上传成功需要把这个值提交到后台
            var qiniuKey = "user/image/20190906/" + suffix

            // 上传文件到七牛
            var observer = {
                //上传过程的监听函数 result参数带有total字段的 object，包含loaded、total、percent三个属性)
                next(result){
                    // 实现上传进度条 ...
                    console.log(result)
                },
                //上传失败回调
                error(err){
                    console.log(err.message)
                },
                // 上传完成回调
                complete(res){
                    // 提交数据给后端同事等业务逻辑 ....
                    console.log(res)
                }
            };
            var putExtra = {
                //原文件名
                fname: "",
                //用来放置自定义变量
                params: {},
                //限制上传文件类型
                mimeType: null
            };
            var config = {
                //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                region:qiniu.region.z2,
                //分片上传的并发请求量
                concurrentRequestLimit:2
            };
            var observable = qiniu.upload(file,qiniuKey,qiniuToken,putExtra,config);
            // 上传开始
            var subscription = observable.subscribe(observer);
            // 取消上传
            // subscription.unsubscribe();
        })
    </script>
</html>

银装素裹

前端根据七牛token上传资源到七牛云