調用七牛雲存儲文件，返回url

文檔地址：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() // 上傳取消
    })
}