js实现oss文件上传及一些问题

时间：2022-09-09 18:18:02

关于兼容性问题，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

这三个值即可。

js实现oss文件上传及一些问题

四、完整代码

<!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

js实现oss文件上传及一些问题的更多相关文章

  1. SpringBoot整合阿里云OSS文件上传、下载、查看、删除

    1. 开发前准备 1.1 前置知识 java基础以及SpringBoot简单基础知识即可. 1.2 环境参数 开发工具:IDEA 基础环境:Maven+JDK8 所用技术:SpringBoot.lom ...

  2. JavaScript进阶&lpar;九&rpar;JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  3. 构建基于阿里云OSS文件上传服务

    转载请注明来源:http://blog.csdn.net/loongshawn/article/details/50710132 <构建基于阿里云OSS文件上传服务> <构建基于OS ...

  4. OSS文件上传及OSS与ODPS之间数据连通

    场景描述        有这样一种场景,用户在自建服务器上存有一定数量级的CSV格式业务数据,某一天用户了解到阿里云的OSS服务存储性价比高(嘿嘿,颜值高),于是想将CSV数据迁移到云上OSS中,并且 ...

  5. js插件---IUpload文件上传插件（包括图片）

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  6. PHP实现阿里云OSS文件上传&lpar;支持批量&rpar;

    上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下:   1.下载阿里云OSS对象上传SDK(P ...

  7. PHP 多图上传，图片批量上传插件，webuploader&period;js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  8. php阿里云oss文件上传

    php的文件上传 文件上传 php的文件上传放在了$_FILES数组里,单文件和多文件上传的区别在于$_FILES['userfile']['name']是否为数组, 不熟悉的可以读一下官方文档 单文 ...

  9. 基于uploadify&period;js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

随机推荐

  1. 【分布式】Zookeeper序列化及通信协议

    一.前言 前面介绍了Zookeeper的系统模型,下面进一步学习Zookeeper的底层序列化机制,Zookeeper的客户端与服务端之间会进行一系列的网络通信来实现数据传输,Zookeeper使用J ...

  2. Alpha版使用说明书

     游戏规则:             玩家是黑色的小煤球哦!             通过方向键或者ASDW,来控制小球移动(上.下.左.右).             累计时间,直到碰到了红色的小球 ...

  3. HDU-3790-最短路径

    题目要求先选最短的道路,如果没有最短路可选,即几条道路都相等,再考花费.用Dijkstra更快一些.在选出最短边的同时加上对应的花费就可以了.详细请看代码: #include<iostream& ...

  4. angular4&period;0运行在微信端的坑坑洼洼

    最近的一个项目,我用ng4操刀,踩了超多的坑: 坑1:项目build后,刷新后404错误: 解决方案:<angular4.0项目build发布后,刷新页面报错404> 坑2:微信分享: 运 ...

  5. 百度Apollo 尝试

    从Git-Hub上下载了Apollo源码在Ubuntu上准备运行一下 完成了以下步骤: bash docker/scripts/install_docker.sh bash docker/script ...

  6. C&num;HTTP请求之POST请求和GET请求

    POST请求 /// <summary> /// POST请求获取信息 /// </summary> /// <param name="url"&gt ...

  7. Maven- 自动导入包的方法-很多没有导入的类，如何处理

    (1) 比如在pom.xml文件里面引入了类,但是在java中使用这个类的时候,还是报错,那就点击Maven.projects的 左上角的刷新的按钮: (2) 在Maven项目的时候,发现很多的类没有 ...

  8. Guava Lists&period;transform踩坑小记&lt&semi;转&gt&semi;

    1.问题提出 1.前段时间在项目中用到Lists.transform返回的List,在对该list修改后发现修改并没有反映在结果里,研究源码后发现问题还挺大.下面通过单步调试的结果来查看Guava L ...

  9. angular&period;js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  10. RabbitMQ集群下队列存放消息的问题

    RabbitMQ中队列有两种模式 1.默认 Default 2.镜像 Mirror [类似于mongoDB,从一直在通过主的操作日志来进行同步] *如果将队列定义为镜像模式,那么这个队列也将区分主从, ...

相关文章