上传文件到阿里云OSS

不加糖435
294 阅读3分钟

一、什么是OSS

OSS全称是Object Storage Service，翻译成中文是对象存储服务。它的核心就是在云上的一个“超大硬盘”，你可以随时随地在这个“硬盘”中存、取东西。

为什么要用OSS？
大容量存储：不用担心硬盘不够用，OSS提供了几乎无限的存储空间。
高可靠性：OSS会将你的数据备份在多个地方，即使某个数据中心出现问题，你的数据也不会丢失。
随时随地访问：只要有网络，你就可以访问OSS中的数据，不受时间和地点的限制。
成本效益：相比自己购买和维护硬盘，使用OSS可能更加经济。默认采用按量计费，按照各计费项的实际用量结算费用。
灵活性：你可以根据需要随时增加或减少存储空间，不用担心资源浪费。
安全性：阿里云提供了多种安全机制，如数据加密、访问控制等，确保你的数据安全。

原理：当你上传一个文件到OSS中时，这个文件会被转化成一个对象。每个对象都有一个唯一的标识符，这样你就可以很容易地找到和管理它。而OSS会将这个对象的多个副本存储在不同的地方，确保数据的安全和可靠性。

二、开通OSS

1、打开阿里云、搜索oss、点击对象存储OSS

image.png 2、点击立即开通。按他的指示进行开通。

image.png 3、开通之后，进入管理控制台。创建Bucket（桶）,你可以把它看作是一个大文件夹，用来存放你的数据。 创建完成后，可以在Bucket列表中看到你创建的桶，点击进去，可以在这个桶下再去创建目录（相当于在大文件夹下创建子文件夹）。接下来就可以将文件上传到这个目录下。 image.png

三、上传文件

1、下载ali-oss

npm install ali-oss --save

2、使用

//引入
import OSS from 'ali-oss'

//实例化 OSS ： 创建OSS对象
export const client = new OSS({
    bucket: 'your-bucket-name',    //bucket名称
    region: 'oss-cn-beijing',   //区域
    accessKeyId: 'xxxxxxxxx', //访问键ID
    accessKeySecret: 'xxxxxxxxxxxxxxxxxx', //访问密钥
    endpoint: 'oss-cn-beijing.aliyuncs.com',//地域节点 ===> 外网访问
    secure:true, //如果是http默认就是false，如果是https就要写成true
});

获取accessKeyId和accessKeySecret。鼠标移入头像位置，点击AccessKey管理。

image.png 创建AccessKey。创建完成后即可获取accessKeyId和accessKeySecret（保存下来）。

image.png

上传文件可能在多个地方用到，所以最好封装成一个方法。

 // nanoid：JavaScript 字符串ID生成器。下载：npm install --save nanoid
import { nanoid } from 'nanoid'
//执行上传文件操作的方法
export const upload = ( file ) =>{
    const uuid = nanoid();
    //截取文件后缀名
    const index = file.name.lastIndexOf('.');
    const suffix = file.name.substring( index + 1 );
    // 当前日期
    const currentDate = tool.dateFormat( new Date() , 'yyyy-MM-dd');
    // eg:demo/2023-08-09/mqWnsan2f0M7f64Z2P1n7.png
    let fileName = 'bucket下的目录名/' + currentDate +'/' + uuid + '.' +suffix;
    let savedCpt;
    //执行上传操作
    return client.multipartUpload(fileName,file,{
            progress:function( percentage , checkpoint ){
                    console.log( percentage , checkpoint )
                    // 文件较大时，上传时可能会出现错误，或者等待时间太长而取消上传，这时可以保存前面已上传的部分（保存到本地或者服务器上），下次直接从断的这个地方继续上传
                    savedCpt = checkpoint;
            },
            checkpoint:savedCpt,//断点续传
    }).then(data=>{
            console.log( data );
    }).finally(()=>{
    })
}

时间戳转换为标准时间

const tool = {}
//时间戳转换为标准时间
tool.dateFormat = ( date:String , fmt='yyyy-MM-dd hh:mm:ss'  )=>{

	date = new Date( date );

	var o = {
		'M+': date.getMonth() + 1, // 月份
		'd+': date.getDate(), // 日
		'h+': date.getHours(), // 小时
		'm+': date.getMinutes(), // 分
		's+': date.getSeconds(), // 秒
		'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
		'S': date.getMilliseconds() // 毫秒	
	}

	if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
		for (var k in o) {
		if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
	}
	
	return fmt;
}

以上代码使用了nanoid生成字符串随机数来作为上传的文件名。然后调用ali-oss的multipartUpload上传文件。上传成功后可以在控制台看到上传的文件。

结语

无论感到多么弱小与无力，也要咬紧牙关、继续前行，即使你停下脚步畏缩不前，时间也不会为你而停下，不会同你一起悲伤（动漫《鬼灭之刃》）。

avatar
文章
阅读
粉丝