上传文件到阿里云OSS
一、什么是OSS
OSS全称是Object Storage Service,翻译成中文是对象存储服务。它的核心就是在云上的一个“超大硬盘”,你可以随时随地在这个“硬盘”中存、取东西。
为什么要用OSS?
大容量存储:不用担心硬盘不够用,OSS提供了几乎无限的存储空间。
高可靠性:OSS会将你的数据备份在多个地方,即使某个数据中心出现问题,你的数据也不会丢失。
随时随地访问:只要有网络,你就可以访问OSS中的数据,不受时间和地点的限制。
成本效益:相比自己购买和维护硬盘,使用OSS可能更加经济。默认采用按量计费,按照各计费项的实际用量结算费用。
灵活性:你可以根据需要随时增加或减少存储空间,不用担心资源浪费。
安全性:阿里云提供了多种安全机制,如数据加密、访问控制等,确保你的数据安全。
原理:当你上传一个文件到OSS中时,这个文件会被转化成一个对象。每个对象都有一个唯一的标识符,这样你就可以很容易地找到和管理它。而OSS会将这个对象的多个副本存储在不同的地方,确保数据的安全和可靠性。
二、开通OSS
1、打开阿里云、搜索oss、点击对象存储OSS
2、点击立即开通。按他的指示进行开通。
3、开通之后,进入管理控制台。创建Bucket(桶),你可以把它看作是一个大文件夹,用来存放你的数据。 创建完成后,可以在Bucket列表中看到你创建的桶,点击进去,可以在这个桶下再去创建目录(相当于在大文件夹下创建子文件夹)。接下来就可以将文件上传到这个目录下。
三、上传文件
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管理。
创建AccessKey。创建完成后即可获取accessKeyId和accessKeySecret(保存下来)。
上传文件可能在多个地方用到,所以最好封装成一个方法。
// 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上传文件。上传成功后可以在控制台看到上传的文件。
结语
无论感到多么弱小与无力,也要咬紧牙关、继续前行,即使你停下脚步畏缩不前,时间也不会为你而停下,不会同你一起悲伤(动漫《鬼灭之刃》)。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbafie
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13