js實現oss文件上傳及一些問題

時間 2019-12-06

原文原文鏈接

關於兼容性問題，ie8如下的能夠使用4.x的版本javascript

1、引入sdk和jqhtml

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

2、基本配置java

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

region：阿里雲服務器地址jquery

accessKeyId：您的key服務器

accessKeySecret：您的密碼，app

bucket：你要上傳到那個文件夾下；這個須要在阿里雲服務器創建測試

3、獲取文件列表ui

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

這個時候通常會出現跨越問題，解決辦法是：this

1.選擇你本身新建的Bucket文件阿里雲

2.找到tab欄中的基礎設置

3.設置跨越

當上傳的文件超過100k時會報錯，解決方法是在下圖中暴露Headers選項中加入：

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

這三個值便可。

4、完整代碼

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