阿里 OSS图片上传 —— 原生JS中使用

短命女 2022-12-08 15:57 541阅读 0赞

> 前言

这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档.

然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.

这里给出两个方案:

*  原生JS(包括jQuery)里如何使用OSS图片上传
 *  二是Vue项目如何使用OSS图片上传(晚点写)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

> OSS 简介及应用场景介绍

1. 全称: Object Storage Service，简称 OSS，是阿里云提供的海量、安全、低成本、高可靠的云存储服务。

2. 它具有与平台无关的RESTful API接口，能够提供99.999999999%的服务持久性。(牛皮就完事了)

**使用场景:**

1.  图片上传
2.  视频上传

> 原生JS使用OSS图片上传

** 1. 方法的定义**

// 方法的定义
       window.multipartUpload = function multipartUpload(storeAs, file, filename, filetype) {
          var client = new OSS.Wrapper({
            accessKeyId: 'youID',    // 
            accessKeySecret: 'youSecret',     // accessKeyId和accessKeySecret是OSS的访问密钥
            endpoint: 'http://xxxxx',            // OSS对应的区域地址
            bucket: 'osshanyatemp'                // 容器
          });
    
          // 这里可以做一些控制 大小,格式等
          if (file.size/1024/1024 < 2 || file.size/1024/1024 > 5) {
            layer.msg("照片大小只能在2~5M之间");
            return;
          }
          console.log(file);
    
          client.multipartUpload(storeAs, file).then(function (result) {
            var reviewUrl = result.url ? result.url : result.res.requestUrls[0].split('?')[0];
            // 这里可以拿到阿里云返回的临时地址 需要传给后台
            console.log(reviewUrl)   
          }).catch(function (err) {
            console.log(err);
          });
        }

**2. 方法的调用 **

// 监听图片上传的元素change事件  
    document.getElementById('uploadImg').addEventListener('change', function (e) {
        var upload_num = document.getElementById('uploadImg').files.length;
        var ff = document.getElementById('uploadImg').files;
        
        // 做一些相关判断
        if (ff.length > 8) {
          layer.msg("最多只能上传8张");
          return;
        }
        
        // 由于是多图上传,所以要用到循环
        for (var i = 0; i < upload_num; i++) {
          var filename = ff[i].name;
          var filetype = ff[i].type;
          
          // 生成10位随机数 原因是阿里云的机制问题
          // 当我上传完某张图片之后,不可上传同名的图片
          // 所以加了个随机数,每张图的名字都不一样      
          let randomNum = getRandom(10);
          let regStr = palindrome(ff[i].name)
          filename = randomNum + regStr;
          // 图片重命名
          Object.defineProperty(ff[i], 'name', {
            value: filename,
            writable: true,
            configurable: true,
            enumerable: true,
          });
    
    
          // 限制格式 png jpeg
          if (
            filename.indexOf("jpeg") != -1 || filename.indexOf('JPEG') != -1
            ) {
            var storeAs = "pic/" + new Date().getTime() + '_' + i + file.name;
           
    
            // 方法调用
            window.multipartUpload(storeAs, ff[i], filename, filetype);
          } else {
            alert('上传的格式不正确');
            return;
          }
        }
      });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221123/3d0c4ab42d374c75a69101e42847c3d6.png