美文网首页前端忐忑历程
阿里OSS储存,上传下载

阿里OSS储存,上传下载

作者: 小鳄鱼的大哥哦 | 来源:发表于2018-02-03 11:32 被阅读306次
    //第一步,配置OSS信息,获取初始化需要的东西
    //第二步,在OSS基础配置中配置跨域信息,请求头设置为*
    //第三步,调用下面方法
    //引入<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
    //上传 bxdOss.upLoad(获取文件的file)
    //获取地址 bxdOss.downLoad(对应的文件名)
    var bxdOss = {
        //初始化(基本配置)
        init: (function() {
            return client = new OSS.Wrapper({
                accessKeyId: '你的accessKeyId',
                accessKeySecret: '你的accessKeySecret',
                endpoint: '你的endpoint',
                bucket: '你的bucket'
            })
        })(),
        //上传, 参数 ==> 文件
        upLoad: function(file) {
            //生成UUID(我这边使用UUID来防止文件名冲突)
            var d = new Date().getTime();
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return(c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            //开始上传
            client.multipartUpload(uuid, file).then(function(result) {
                //成功之后的回调
                console.log(result);
            }).catch(function(err) {
                //失败之后的回调
                console.log(err);
            });
        },
        //下载,参数 ==> 文件名
        downLoad: function(objectKey) {
            var saveAs = 'download_file'; //下载的文件名为XXXX
            var result = client.signatureUrl(objectKey, {
                expires: 3600,
                response: {
            //成功之后的回调
                    'content-disposition': 'attachment; filename="' + saveAs + '"'
                }
            });
            console.log(result);
            return result;
        }
    }
    //具体的回调函数已标明,根据自身需求更改
    //上传
    //document.getElementById('文件框ID').addEventListener('change', function (e) {
    //  var file = e.target.files[0];
    //  bxdOss.upLoad(file);
    //  });
    //上传之后会console一个文件名,用来下载
    //获取对应的OSS路径
    //bxdOss.downLoad(刚刚得到的文件名);
    //查看console
    

    相关文章

      网友评论

        本文标题:阿里OSS储存,上传下载

        本文链接:https://www.haomeiwen.com/subject/zaquzxtx.html