七牛云官方jssdk文档:
https://developer.qiniu.io/kodo/sdk/javascript
plupload第三方上传插件文档:
http://chaping.github.io/plupload/doc/#
// 下载qiniu-js
npm install qiniu-js
// 在页面中引入
import * as qiniu from 'qiniu-js'
上传
服务端准备
JS-SDK依赖服务端颁发的上传凭证,后端服务应提供一个 URL 地址,供 SDK 初始化使用,前端通过 Ajax 请求该地址后获得 upToken。 Ajax 请求成功后,服务端应返回如下格式的 json:
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
"xxx": "..."
}
1.生成上传选择的点选按钮
<div id="video_container" class="video-container">// 上传按钮的父元素
<div id="pickfiles" class="pickfiles"></div>// 上传按钮
</div>
2.前端通过接口请求获取token信息
3.创建Qiniu.uploader
mounted(){
this.getQiniuToken(() => {
this.initQiniu() // 将initQiniu()当做callback回调函数传入给getQiniuToken函数
})
}
//methods里面
initQiniu: function () {
// uploader为一个plupload对象,继承了所有plupload的方法
this.uploader = Qiniu.uploader({
//常用配置:
runtimes: 'html5,flash,html4', // 上传模式,依次退化(照着官网来就是了)
browse_button: 'pickfiles' //上传选择的点选按钮,这是必须项
container: 'video_container' // 上传区域的DOM Id
bucket_name: 'bucket01' //存储空间的空间名 七牛云后台可查
domain: 'https://xxx.com' //空间域名 七牛云后台可查
token: 'xxxxxxx' //上传凭证,JS-SDK 依赖服务端颁发 token,必填项
chunk_size: '4mb' //分片上传时,每块的体积
max_file_size: '100mb',//最大文件体积限制
get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken(没有特殊需求一般为false)
auto_start: true, // 选择文件后自动上传,若关闭需要自己绑定事件触发上传
max_retries: 3, // 上传失败最大重试次数
dragdrop: false, // 开启可拖曳上传
save_key: true,
init: {
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
});
},
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
// (上传文件前做一些处理)
},
'UploadProgress': function(up, file) {
// 每个文件上传时,处理相关的事情
_this.videoProgressValue = file.precent;// (给进度条赋值)
//init里的this不是vue,所以在一个开始var _this = this
},
'FileUploaded': function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
// 其中info是文件上传成功后,服务端返回的json,形式如:
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 查看简单反馈
// var domain = up.getOption('domain');
// var res = parseJSON(info);
// var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
},
'Error': function(up, err, errTip) {
//上传出错时,处理相关的事情
},
'UploadComplete': function() {
//队列文件处理完毕后,处理相关的事情
},
'Key': function(up, file) {
// 若想在前端对每个文件的key进行个性化处理,可以配置该函数
// 该配置必须要在unique_names: false,save_key: false时才生效
var key = "";
// do something with key here
// (可以自定义key不设定默认是文件名)
return key
}
})
}
// domain为七牛空间对应的域名,选择某个空间后,可通过 空间设置->基本设置->域名设置 查看获取
在项目工作过程中遇到了一个问题,iphone5的手机可以选择视频但上传七牛进度一直是1%,
这个问题原因应该是之前plupload一直没有彻底解决的iOS环境下兼容性的问题,经过多次尝试找到解决办法,添加下面这个属性就可以解决
multi_selection: false, // 限制只能上传单张图片
但是添加这个属性后选择视频会多走一层预览+压缩的步骤,这个步骤过于耗时,所以做了特殊处理,只有在iphone5时才将multi_selection置为false,这样虽然损失了一些便利性,但确保了上传视频功能的正常使用
多个上传实例
var option1 = {
key : val,
……
};
var uploader = Qiniu.uploader(option1);
var Qiniu2 = new QiniuJsSDK(); // QiniuJsSDK顾名思义七牛的JS-SDK对象
var option2 = {
key : val,
……
};
var uploader2 = Qiniu2.uploader(option2);