前端上传图片到阿里云oss服务器(简单上传和分片上传)

前端上传文件到阿里云oss服务器(简单上传和分片上传)

最近做的项目用到了阿里云oss服务器，所以在此记录一下。
1.首先需要申请阿里云oss服务器，然后拿到相关的配置参数
2.然后在js文件中封装上传相关方法就可以了，此处用的layui的upload方法，通过日期创建文件目录和随机id防止图片存储重复。
3.记得要引入aliyun-oss-sdk.min.js。
直接上代码吧~

  const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填写Bucket名称。
        bucket: 'examplebucket'
      });
   const headers = {
     // 指定该Object被下载时网页的缓存行为。
     // 'Cache-Control': 'no-cache', 
     // 指定该Object被下载时的名称。
     // 'Content-Disposition': 'oss_download.txt', 
     //Object生成时会创建相应的ETag ，ETag用于标识一个Object的内容。
     // 对于PutObject请求创建的Object，ETag值是其内容的MD5值。
     // 对于其他方式创建的Object，ETag值是基于一定计算规则生成的唯一值，但不是其内容的MD5值。
     //'ETag':'',
     // 指定PutObject操作时是否覆盖同名Object
     'x-oss-forbid-overwrite': true,
    }
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          console.log(p);
          //实时返回上传进度（百分比实时渲染，upload-progress容器ID名）
            // console.log(p);
            var progress = p*100;
            // $('#upload-progress').text(progress+'%')//可以在页面设置进度条
        },
        // 设置并发上传的分片数量。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };
    //oss简单上传
   async function putObject(fileName, data, fileDir, dom, doneCallback, loading) {
     try {
         let curDate = formatDate(new Date());
         let result = await client.put(fileDir + '/' + curDate + '/'+ fileName, data, {
             headers
         });
		console.log(result)//此result.url里面就是上传到阿里云里面的链接
         if (doneCallback) {
             doneCallback(result)
         }
         layer.msg('上传成功');
         layer.close(loading);
     } catch (e) {
         console.log(e);
     }
 }
     // oss分片上传
    async function multipartUploadFn(fileName, data, fileDir, dom, doneCallback, loading) {

        try {
            let dateStr = formatDate(new Date());
            let curDate = dateStr.replace(/\-/g, "/");
            // 分片上传。
            const res = await client.multipartUpload(fileDir + '/' + curDate + '/' + fileName, data, {
              ...options,
              // 设置上传回调
            });
            console.log(res)
            var uint8Array = res.res.data;//此时返回的是一个字节，需要转成字符串
            const decoder = new TextDecoder(); // 创建一个TextDecoder对象
            const decodedString = decoder.decode(uint8Array); // 将Uint8Array转换为字符串
            console.log('decodedString', decodedString);
    
            var xmlDoc = $.parseXML(decodedString); // 解析XML字符串为XML文档对象
            var $xml = $(xmlDoc); // 将XML文档对象转换为jQuery对象
    
            var statename = $xml.find('Key').text(); // 查找并获取Key元素的文本内容
            console.log("statename", statename);//此时的statename直接就是一个服务器上的路径，可以拼接上你自己的服务器进行查看了。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

            let result={url:''}
            result.url=statename
            if (doneCallback) {
                doneCallback(result)
            }
            layer.msg('上传成功');
            layer.close(loading);

          } catch (err) {
            console.log(err);
          }
    }
  function uploadFile(dom, fileDir, doneCallback, ext) {
     var exts = 'pdf|bmp|jpg|jpeg|png|gif|webp|doc|docx';
     if (ext) {
         exts = ext
     }
     var uploadcom=upload.render({
         elem: dom,
         accept: 'file',
         multiple: true,
         url: '', 
         exts: exts,
         auto: false,
         choose: function (obj) {
             var loading = layer.load()
             obj.preview(function (index, file, result) {
                 console.log('file', file)
                 var fileName = file.name;
                 var suffix = fileName.split('.');
                 fileName = unique() + '.' + suffix[suffix.length - 1];
                 if(file.size < (50 * 1024 * 1024)){
                        // 判断小于50M正常上传，大于则需要进行分片
                        putObject(fileName, file, fileDir, domStr, doneCallback, loading);
                    }else{
                        multipartUploadFn(fileName, file, fileDir, domStr, doneCallback, loading);

                    }
             });
             // 清空历史上传文件，解决choose只执行一次的问题！！！
             uploadcom.config.elem.next()[0].value = ''; 
         },
     });
 }
 //每次随机产生一个唯一的ID。
  function sId() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }

  function unique() {
      return (sId() + sId() + "-" + sId() + "-" + sId() + "-" + sId() + "-" + sId() + sId() + sId());
  }
     // 时间戳转时间
 function formatDate(date, isTime) {
      var date = new Date(date);
      var YY = date.getFullYear() + '/';
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      if (isTime) {
          return YY + MM + DD + " " + hh + mm + ss;
      } else {
          return YY + MM + DD;
      }
  }