使用jsJdk异步上传图片至OSS服务器

阿里云官方文档中给的基本都是同步上传文件的DEMO,可能是异步的比较简单,但是由于自己JS基础还不够牢固,在学习使用的时候也很闹心,因为老是看着看着就看到异步的那边去了。将自己写好的的一个DEMO放于博客中,万一能够帮助到任何一个和我一样的朋友也是好的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片至OSS服务器DEMO(分片上传)</title>
</head>
<body>
<input type="file" id="pic">
<button onclick="upload()">上传</button>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
<script type="text/javascript">
    /*OSS服务器配置*/
    var client = new OSS.Wrapper({
        region:'oss服务器创建的地点',
        //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建并使用STS方式来进行API访问
        accessKeyId: '访问控制中创建的accesskeyId',
        accessKeySecret: '访问控制中创建的accesskeyId对应的密钥,只有在刚创建的时候会显示,需要保存下来',
        bucket: 'oss服务器上创建的bucket的名称'
    });

    function upload(){
        var pic = document.getElementById("pic").files[0];//获取html5的file对象
        /**
         * 如果想将图片上传到某个文件夹的话,将文件夹路径拼接到picName中
         * 如:存到test文件夹下"test/pic.jpg"
         * @type {string}
         */
        var picName = "test/"+pic.name;//拼接上传图片名称
        //上传图片至OSS服务器
        client.multipartUpload(picName,pic).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
    }
</script>
</html>

阿里云官方推荐创建client的时候还是要使用stsToken比较安全,目前我还没有尝试到这个demo,等我尝试成功后,再补充进来。

补充:

上传过程遇到过的问题

1. c.stat is not a function  出现这个问题根据https://help.aliyun.com/document_detail/32069.html?spm=a2c4e.11153987.0.0.2b071193rF9dsN中的bucket设置设置一下就能解决。

猜你喜欢

转载自blog.csdn.net/qq_37028216/article/details/79741209