前端上传图片到阿里云oss服务器

前端上传文件到阿里云oss服务器

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

    let client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: 'gel-file'
    });
   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,
    }
   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
         });
         $(dom + "-span").removeClass("layui-hide").text(fileName).attr("title", fileName).attr("file", result.url);
         if (doneCallback) {
             doneCallback(result)
         }
         layer.msg('上传成功');
         layer.close(loading);
     } catch (e) {
         console.log(e);
     }
 }
  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];
                 putObject(fileName, file, fileDir, dom, 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;
      }
  }