zoukankan      html  css  js  c++  java
  • 调用七牛云存储文件,返回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() // 上传取消
        })
    }
  • 相关阅读:
    Java接口的真正意义
    从机械自动化专业转行到Java工程师的学习之路
    程序员必备的17个软件开发工具
    【Java练手项目】Java外卖点餐系统
    Java接口的其他使用语法
    【Java练手项目】Java在线考试系统
    IDEA最新版本中maven配置默认选项
    Java 企业级项目需求文档
    Elasticsearch 搜索数量不能超过10000的解决方案
    Java中TreeSet怎么实现?(详解)
  • 原文地址:https://www.cnblogs.com/fqh123/p/10970234.html
Copyright © 2011-2022 走看看