阿里的oss文件上传前端代码,以及提交参数

最新推荐文章于 2024-01-21 20:31:35 发布

tomMMMMMMMMMMM

最新推荐文章于 2024-01-21 20:31:35 发布

阅读量4.1k

点赞数

文章标签： oss 前端

本文链接：https://blog.csdn.net/tomMMMMMMMMMMM/article/details/81001874

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.1.min.js"></script>
    <title></title>
</head>
<body>
<form action="">
    <input type="file" id="file" />
</form>
<br/>
<button value="提交" onclick="on_click_upload_file();"></button>
</body>
<script type="text/javascript">

    var client = new OSS.Wrapper({
        region: "oss-cn-hangzhou",
        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
        accessKeyId:"STS.******8dpuv7oa553Fbe3F",
        accessKeySecret: "EmPuvdvnJ****AfWNBBxyeGtjPDZnULDk8Yw5K",
        stsToken:"CAISpQJ1q6Ft5B2yfSjIr4mHIIjwr7l14aabd1CGi2FgObxqjaCYpDz2IH5Oe3VtBe8WsvU/mm9Y7fYflqVoRoReREvCKMBt9YgPRfN7ySqF6aKP9rUhpMCPGAr6Umz3vqL7Z+H+U6mqGJOEYEzFkSle2KbzcS7YMXWuLZyOj+wIDLkQRRLqL0AUZrFsKxBltdUROFbIKP+pKWSKuGfLC1dysQcO/wEL4K+kkMqH8Uic3h+owfIOu4P0I4qpKtVhJ4s4EfXNhbAmKfKfi3ELtUIUpfct3JYpo2mX4ouvZHBK+AiDPubu9dliERR0fKBSGdQf8qKjyaAk5byPxtSplEYWbbxPIC3bRZG9xszfA/+uNds/erv9Nm7EzteVLJ7xvhPC8ZL9/OTwERqAATve8YjN0upm/2Mp+zCd1GZuts6hXk+ikKHwrw0Ge6TsUgvlSQOgcEW1X9vT0nBlV8IzNbYufBD56DhtESBG7m6Q6zRKyTZBJzJueLZXrDtNsUiNAcK5DUDYm0ZDnIcU5sO6+m0s+A02lQwt0Owv6NpMiWZmbnEqcj6ArilEOFr+",
         bucket: "customize-test"//用户oss仓库地址
    });

   function on_click_upload_file(){


       var f = document.getElementById("file").files[0];
       console.log(f.name);
       var val= document.getElementById("file").value;
       var suffix = val.substr(val.indexOf("."));
       var obj=timestamp();  // 这里是生成文件名

       var storeAs = obj+suffix;  //命名空间加上文件名,中间加上/ 会在后台生成文件夹(如果有crate权限)
       console.log(' => ' + storeAs);

       client.multipartUpload(storeAs, f).then(function (result) {
           console.log(result);
           console.log(result.url);
       }).catch(function (err) {
           console.log(err);
       });
   }


   /**
    * 生成文件名
    * @returns
    */
   function timestamp(){
       var time = new Date();
       var y = time.getFullYear();
       var m = time.getMonth()+1;
       var d = time.getDate();
       var h = time.getHours();
       var mm = time.getMinutes();
       var s = time.getSeconds();

       console.log(y);

       return ""+y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s);
   }




   function add0(m){
       return m<10?'0'+m : m;
   }



</script>
</html>

tomMMMMMMMMMMM

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
阿里的oss文件上传前端代码,以及提交参数

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="Access-Control-Allow-Origin" content="*"&gt; &lt;sc
复制链接

扫一扫