文档地址:https://developer.qiniu.com/kodo/sdk/1283/javascript#2
npm引入
npm install qiniu-js
例子:
var observable = qiniu.upload(file, key, token, putExtra, config) var subscription = observable.subscribe(observer) // 上传开始 // or var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以 subscription.unsubscribe() // 上传取消
参数说明:
file:上传的文件(files[0])
key:自定义的路径
token:后台接口返回
config: object var config = { useCdnDomain: true, region: qiniu.region.z2 };
var putExtra = { fname: "", params: {}, mimeType: [] || null };
其它的具体参数可取值可以参考文档
贴个具体上传的代码
selectPhoto(event){//上传身份证明文档(doc、docx) 照片 var self=this; self.photoWordFormat=0;//重置一下 if(event.target.files.length>0){ var dianIndex=event.target.files[0].name.lastIndexOf('.'), fileName, file=event.target.files[0]; if(dianIndex>-1){ fileName=event.target.files[0].name.slice(dianIndex); if(fileName==".png"||fileName==".jpg"||fileName==".gif"){ if(file.size>5120000){ tools.alert('文件太大了, 不允许超过5M~'); return; } self.photoWorld=event.target.files[0].name; self.photoWordFormat=1;//格式正确 var timestamp = (new Date()).valueOf(); var params={ file:file,//要上传的文件 key:"paper_file/"+timestamp+self.photoWorld,//自定义文件地址 token:self.token, config:{ useCdnDomain: true, region:undefined }, putExtra:{ fname:self.photoWorld, params: {}, mimeType: [] || null }, } self.upLoadQiniu(params); }else{ tools.alert('请选择png,jpg,gif格式的文件,并且文件不能为空'); return; } } } }, upLoadQiniu(params){//上传至七牛云 var self=this; self.loading= layer.load(1, {//请求未成功时出现loading页 ,3代表一中效果 shade: [0.1,'#fff'] //0.1透明度的白色背景 }); // 上传回调 function next(res){ // console.log(res); } function error(err){ console.log(err); } function complete(res){ var url="http://xxxxxx.cn/"+res.key; self.postObj.pic=url; layer.close(self.loading);//关闭loading效果 } var observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config); var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以 // subscription.unsubscribe() // 上传取消 },
进一步在tools中封装成一个公共方法
/** * * @param {*} file 上传的文件 * @param {*} token 上传需要的token */ function qiniuUpLoadFun(file,token){//七牛上传方法 return new Promise(function(resolve){ var timestamp = (new Date()).valueOf(); var params={ file:file,//要上传的文件 key:"paper_file/"+timestamp+file.name,//自定义文件地址 token:token, config:{ useCdnDomain: true, region:undefined }, putExtra:{ fname:file.name, params: {}, mimeType: [] || null }, } resolve(params); }).then(function(params){ return upLoadQiniu(params); }) } function upLoadQiniu(params){//上传至七牛云 return new Promise(function(resolve){ var loading= layer.load(1, {//请求未成功时出现loading页 ,3代表一种效果 shade: [0.1,'#fff'] //0.1透明度的白色背景 }); // 上传回调 function next(res){ // console.log(res); console.log("上传中"); } function error(err){ console.log(err); } function complete(res){ var url="http://xxxxxx.cn/"+res.key; layer.close(loading);//关闭loading效果 resolve(url); } var observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config); var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以 // subscription.unsubscribe() // 上传取消 }) }