web上传图片到七牛云（客户端 js sdk）

最新推荐文章于 2024-08-12 19:46:44 发布

大海无量波涛凶

最新推荐文章于 2024-08-12 19:46:44 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/qq_37164847/article/details/109351425

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>

   <body>
       <input type="file" οnchange="upload_image(this)">

//引入jq
       <script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.1.1/qiniu.min.js"></script>
   <script>

           var qiniu_token="先获取七牛的token";
           function upload_image(obj) {
           var fileName = $(obj).val();
           var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
           var file = $(obj).get(0).files[0];
               var options = {
               quality: 0.92,
               noCompressIfLarger: true
               }
               qiniu.compressImage(file, options).then(data => {
               var observable = qiniu.upload(data.dist, null, qiniu_token, null, null)
               var subscription = observable.subscribe({
                   next: (result) => {
                   // 主要用来展示进度
                   console.warn(result);
                   },
                   error: () => {
                       console.log("上传图片失败");
                   },
                   complete: (res) => {
                   console.log(res.key);
                   },
               }) // 上传开始
               })
           }
       </script>
   </body>
</html>