zoukankan      html  css  js  c++  java
  • js实现oss文件上传及一些问题

    关于兼容性问题,ie8以下的可以使用4.x的版本

    一、引入sdk和jq

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

    二、基本配置

    var client =new OSS.Wrapper({
        region:'',
        accessKeyId:'‘,
        accessKeySecret:'',
        bucket:''
    })

    region:阿里云服务器地址

    accessKeyId:您的key

    accessKeySecret:您的密码,

    bucket:你要上传到那个文件夹下; 这个需要在阿里云服务器建立

    三、获取文件列表

    client.list({
                'max-keys':10
     }).then(function(res) {
             console.log(res)
     }).catch(function(err){
             console.log(err)
    })

    这个时候一般会出现跨越问题,解决办法是:

    1.选择你自己新建的Bucket文件

    2.找到tab栏中的基础设置

    3.设置跨越

    当上传的文件超过100k时会报错,解决方法是在下图中暴露Headers选项中加入:

    etag
    x-oss-request-id
    x-oss-meta-test

    这三个值即可。

    四、完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>js oss文件上传测试</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
    </head>
    <body>
        <input type="file" name="" id="file" value=""/>
        <script type="text/javascript">
            var client =new OSS.Wrapper({
                region:'',
                accessKeyId:'',
                accessKeySecret:'',
                bucket:''
            })
    
            //获取oss文件列表
            client.list({
                'max-keys':10
            }).then(function(res) {
                console.log(res)
            }).catch(function(err){
                console.log(err)
            })
    
            $("#file").change(function () {
                client.multipartUpload(this.files[0].name, this.files[0]).then(function (result) {
                    console.log(result);
                }).catch(function (err) {
                    console.log(err);
                });
            });
        </script>
    </body>
    </html>

    参考地址:

    https://www.cnblogs.com/ossteam/p/4942227.html

    https://blog.csdn.net/dc2222333/article/details/79409513

    https://www.cnblogs.com/MainActivity/p/8492211.html

  • 相关阅读:
    Kotlin技术入门以及和Java对比.md
    最新版Charles破解方法(Mac+Windows).md
    阿里移动云专场专题.md
    win10下 github+hexo搭建个人博客.md
    Java内存回收机制.md
    基于补偿的数据库分布式事务实践
    Log4J,在踩坑中升级版本
    关于服务注册与发现
    JVM内存模型-重排序&内存屏障
    GC初识
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/9441716.html
Copyright © 2011-2022 走看看