目录

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

前端上传图片到阿里云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;
}
}