通过七牛云 js sdk 上传文件到自己的云盘中

1. 申请七牛云,完成实名认证

使用七牛云的对象存储,新建存储空间

2. 修改自己云盘对应数据

参考博客:https://blog.csdn.net/netdxy/article/details/50507161
下载这篇博客中第一步介绍的压缩包
在这里插入图片描述
根据该博客中介绍,修改如下

(1) 设置token

我是根据第一种方法,线上生成token,
生成token工具:https://github.com/Zzzia/qiniuToken

法一:使用get方式

在这里插入图片描述
直接进入该页面,在地址栏将ak,sk,bucket修改成自己的

法二:使用post方式

在他的github上给了一个请求地址,就是请求对应的api
可以用自己随便写的页面进行请求

$.ajax({
	url: 'http://zzzia.net:8080/qiniu/',//github上的请求地址
	type: 'post',
	data: {
		'accessKey':'******',//ak
		'secretKey':'******',//sk
		'bucket':'******'//存储空间名字
	},
	dataType: 'json',
	success: function (data) {

	}
})

然后打开该页面,进入工作台,选择network,在左下角选择qiniu/,就可以看见自己的token了

(2)设置URL

在qiniu.js中找到如下字段
在这里插入图片描述
将qiniuUploaderUrl修改成自己对应的域(华南,华北。。。)
参考文章:https://segmentfault.com/q/1010000003758618
我还是将各个位置的域名搬了过来。。
华东
华北
华南
北美
比如我的是华南。我就需要将上面的修改成如下:


    var qiniuUploadUrl;
    if (window.location.protocol === 'https:') {
        qiniuUploadUrl = 'http://up-z2.qiniu.com';
    } else {
        qiniuUploadUrl = 'http://upload-z2.qiniu.com';
    }

    /**
     * qiniu upload urls
     * 'qiniuUploadUrls' is used to change target when current url is not avaliable
     * @type {Array}
     */
    var qiniuUploadUrls = [
        "http://upload-z2.qiniu.com",
        "http://up-z2.qiniu.com",
    ];

    var changeUrlTimes = 0;

然后再打开index.html页面进行上传,就可以在自己的内存空间上看见文件已经完成了上传。

后来我发现,过一会进行测试时,会出现401错误,原因如下
token过期,重新获取新的token就可以进行上传了

3. 如何查看token的有效时间

可以看到我们的token分为三段,用:隔开
例:

T_22tq0Cj6E5MxfpMrdGezdCEVf3cb2sHh3fROmJ:lLHE8iQdq9AoblzM1dT8gh1uzZU=:eyJzY29wZSI6Imt4Z2wyMzMzIiwiZGVhZGxpbmUiOjE1ODEwNzkxMTN9

第三段就是我们的token
使用base64 解码可得

{"scope":"kxgl2333","deadline":1581079113}

deadline就是失效时间,但是为时间戳格式,转换可得

2020-02-07 20:38:33

base64在线解码:https://tool.oschina.net/encrypt?type=3
时间戳在线转换:https://tool.lu/timestamp/

使用七牛云JavaScript SDK上传文件的方法如下: 1. 引入 SDK: ```html <script src="https://cdn.staticfile.org/plupload/2.3.6/plupload.full.min.js"></script> <script src="https://cdn.staticfile.org/qiniu-js/1.0.24-beta/qiniu.min.js"></script> ``` 2. 配置七牛云参数: ```javascript var config = { useCdnDomain: true, // 是否使用 CDN 加速域名 region: qiniu.region.z2, // 上传域名区域 uptokenURL: '/api/uptoken', // 获取上传凭证的后端接口 domain: 'http://yourdomain.com/', // 域名,即访问上传的文件时使用的地址 container: 'upload-container', // 上传控件的容器 ID maxFileSize: 10 * 1024 * 1024, // 最大文件大小,单位为字节 chunkSize: 4 * 1024 * 1024, // 分块上传时每块的大小,单位为字节 autoStart: true // 是否自动开始上传 }; ``` 3. 创建上传实例: ```javascript var uploader = Qiniu.uploader({ runtimes: 'html5,flash,html4', browse_button: 'select-file', // 选择文件按钮的 ID ...config, // 将七牛云参数传入 init: { // 上传状态改变时的回调函数 'StateChanged': function(up) { if (up.state === plupload.STARTED) { console.log('上传'); } else if (up.state === plupload.STOPPED) { console.log('上传停止'); } }, // 文件添加到上传队列时的回调函数 'FilesAdded': function(up, files) { // 遍历文件列表,处理每个文件 plupload.each(files, function(file) { console.log('文件名:' + file.name + ', 文件大小:' + plupload.formatSize(file.size)); }); }, // 上传成功时的回调函数 'FileUploaded': function(up, file, info) { var res = JSON.parse(info.response); // 解析上传成功后返回的数据 console.log('文件上传成功,访问地址为:' + config.domain + res.key); }, // 上传出错时的回调函数 'Error': function(up, err, errTip) { console.log('上传出错:' + errTip); } } }); ``` 4. 开始上传: ```javascript uploader.start(); ``` 以上就是使用七牛云JavaScript SDK 上传文件的方法。需要注意的是,上传文件需要先获取上传凭证,可以通过调用七牛云的 API 接口来获取,也可以使用 SDK 提供的 `uptokenURL` 参数来指定后端接口获取。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值