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

2023-06-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

这三个值即可。

四、完整代码

<!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文件上传及一些问题的相关教程结束。

《js实现oss文件上传及一些问题.doc》

下载本文的Word格式文档,以方便收藏与打印。