阿里云oss对象存储在vue中的使用

摘要:
阿里云对象存储OSS(ObjectStorageService)是阿里云提供的海量、安全、低成本、高持久的云存储服务。阿里云oss对象存储是阿里云提供的海量、安全、低成本、高持久的云存储服务,包括服务端加密、客户端加密、防盗链、IP黑白名单、细粒度权限管控、日志审计、WORM特性等。满足企业数据安全与合规要求多线BGP骨干网络。

阿里云对象存储OSS(Object Storage Service)是阿里云提供的海量、安全、低成本、高持久的云存储服务。其数据设计持久性不低于99.9999999999%(12个9),服务可用性(或业务连续性)不低于99.995%。

OSS具有与平台无关的RESTful API接口,可以在任何应用、任何时间、任何地点存储和访问任意类型的数据。

项目中如果有类似于上传视频等业务时,如果将大量视频文件上传到应用服务器,会导致应用服务器内存占用率高,导致服务器卡死等问题。

阿里云oss对象存储是阿里云提供的海量、安全、低成本、高持久的云存储服务,非常适用于这种业务。

1、优势

  • 服务可用性不低于99.995%。
  • 数据设计持久性不低于99.9999999999%。
  • 规模自动扩展,不影响对外服务。
  • 数据自动多重冗余备份。
  • 提供企业级多层次安全防护,包括服务端加密、客户端加密、防盗链、IP黑白名单、细粒度权限管控、日志审计、WORM特性等。
  • 多用户资源隔离机制,支持异地容灾机制。
  • 获得多项合规认证,包括SEC、FINRA等,满足企业数据安全与合规要求
  • 多线BGP骨干网络,带宽资源充足,上行流量免费。
  • 无需运维人员与托管费用,0成本运维。
  • 提供多种数据处理能力,如图片处理、视频截帧、文档预览、图片场景识别、人脸识别、SQL就地查询等,并无缝对接Hadoop生态、以及阿里云函数计算、EMR、DataLakeAnalytics、BatchCompute、MaxCompute、DBS等产品,满足企业数据分析与管理的需求。
  • 提供标准的RESTful API接口、丰富的SDK包、客户端工具、控制台。您可以像使用文件一样方便地上传、下载、检索、管理用于Web网站或者移动应用的海量数据。
  • 不限制存储空间大小。您可以根据所需存储量无限扩展存储空间,解决了传统硬件存储扩容问题。
  • 支持流式写入和读出。特别适合视频等大文件的边写边读业务场景。
  • 支持数据生命周期管理。您可以通过设置生命周期规则,将到期数据批量删除或者转储为更低成本的低频访问、归档存储、冷归档存储。
  • 提供STS和URL鉴权和授权机制、IP黑白名单、防盗链、主子账号等功能。
  • 提供用户级别资源隔离机制和多集群同步机制。
  • 提供服务器端加密和客户端加密,并支持基于SSL/TLS的HTTPS加密传输,有效防止数据在云端的潜在安全风险。
  • 提供版本控制功能,防止文件被误删除或覆盖而造成数据丢失。
  • OSS采用数据冗余存储机制,将每个对象的不同冗余存储在同一个区域内多个设施的多个设备上,确保硬件失效时的数据持久性和可用性。
  • OSS针对对象的操作具有强一致性。对象一旦上传或复制成功,即可立即读取,且冗余写入多个设备。
  • OSS会通过计算网络流量包的校验和,验证数据包在客户端和服务端之间传输中是否出错,保证数据完整传输。
  • OSS的冗余存储机制,可支持两个存储设施并发损坏时,仍维持数据不丢失。
  • 当数据存入OSS后,OSS会检测和修复丢失的冗余,确保数据持久性和可用性。
  • OSS会周期性地通过校验等方式验证数据的完整性,及时发现因硬件失效等原因造成的数据损坏。当检测到数据有部分损坏或丢失时,OSS会利用冗余数据重建并修复损坏数据。
  • 图片处理:支持JPG、PNG、BMP、GIF、WebP、TIFF等多种图片格式的转换,以及缩略图、剪裁、水印、缩放等多种操作。
  • 音视频转码:提供高质量、高速并行的音视频转码能力,让您的音视频文件轻松应对各种终端设备。
  • 互联网访问加速:提供传输加速服务,可优化互联网传输链路和协议栈,大幅减少数据远距离传输超时的比例,极大地提升用户上传和下载体验。
  • 内容加速分发:OSS作为源站,搭配CDN进行内容分发,提升同一个文件被重复下载的体验。

2、前端如何使用oss(oss在vue中的使用)

安装

使用npm安装SDK开发包,安装命令为

npm install ali-oss --save

阿里云oss对象存储在vue中的使用第1张

 引入

在组件中使用require引入oss

const OSS = require("ali-oss");
const client = new OSS({
  bucket: '****',
  region: '****',
  accessKeyId: '****',
  accessKeySecret: '****',
});

 使用

template:
<el-upload action="" :data="uploadParams" :before-upload="beforeUpload" :show-file-list="false" multiple>
  <el-button size="small" type="primary" :loading="uploading">点击上传</el-button>
</el-upload>


js:
//
上传视频到阿里云oss async put (file) { try { let result = await client.put(`video/2020-10-10/${file.name}`,file); //会将该文件存在云服务器video/2020-10-10文件夹内 const url = result.url //获取视频时长 const videoElement = document.createElement("VIDEO"); videoElement.src = result.url; videoElement.oncanplay = () => { this.uploadParams.timeLength = this.getFormatTime(videoElement.duration) let params = { fileName: file.name, //文件名 size: file.size, //文件大小 timeLength: this.uploadParams.timeLength, //视频时长 url: url //视频oss存储路径 } video.saveInfo(params).then(res=>{ this.uploading = false; successMsg(res.msg) this.init() }).catch(err=>{ this.uploading = false; }) }; } catch (e) { this.uploading = false; console.log('上传失败',e); } }, beforeUpload(file){ return new Promise((resolve, reject) => { let name = file.name.substring(file.name.lastIndexOf(".")).toLowerCase(); if (/.(mp4)$/.test(name)) { this.uploading = true; this.put(file) resolve() } else { errorMsg("请上传【mp4】格式的视频文件"); reject() } }) },

官方示例:

const OSS = require('ali-oss')
const client = new OSS({
  bucket: '<Your BucketName>',
  // region以杭州为例(oss-cn-hangzhou),其他region按实际情况填写。
  region: '<Your Region>',
  // 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
});

async function put () {
  try {
    //object-name可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。
    let result = await client.put('object-name', 'local-file');
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}

put();
 

 详情请参考  https://help.aliyun.com/document_detail/111265.html?spm=a2c4g.11186623.6.1106.724c5338jlUtwh

 

免责声明:文章转载自《阿里云oss对象存储在vue中的使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇VS中,如何将存在于解决方案里,但是没有显示出来的文件(或文件夹)显示到项目中。db2 reorg详解下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

一个简单的MySQL数据库同步脚本

Talk is cheap,show you code. 1 mysqldump -h[remoteHost] -u[username] -p[password] -P[port] --databases [databasename1] [databasename2] > [D:mysqlsync emp.sql] 2 echo "备份完成"; 3...

ts变量类型和编译文件tsconfig.json简单配置

基础: 1、typescript是JavaScript的超集,支持js的所有语法 2、typescript不能运行在浏览器,需要使用编译器编译后使用 3、全局安装typescript编译器 npm install -g typescript 4、编译typescript文件(01ts.ts) tsc 01ts.ts   编译过程中不报错即成功,同级目录下会...

Windows Embedded CE 6.0开发环境的搭建

第一步,安装VS2k5,安装完成后要安装VS2k5 SP1补丁(KB926601),否则后面的Platform Builder SP1无法安装。       第二步,安装Windows Embedded CE 6.0,官方下载地址为: http://www.microsoft.com/downloads/details.aspx?familyid=7...

Git提交代码报错husky &amp;gt; pre-commit

在接触了Git版本控制之后,很长一段时间里就只使用commit、pull、push这三个命令,并没有进行深究。而早上在用commit代码提交前端代码的时候出现了报错信息husky > pre-commit,于是开始查找背后的原因,最后通过阅读相关资料成功解决。 一、问题复现 我是通过IDEA编辑器中的Git工具进行提交代码,以往都是在勾选上需要提交的...

Amazon DynamoDB 全局表

Amazon DynamoDB 全局表 为部署多区域、多主机数据库提供了完全托管的解决方案,而不必构建和维护您自己的复制解决方案。在创建全局表时,指定要在其中提供表的 AWS 区域。DynamoDB 执行在这些区域中创建相同的表并将持续数据更改传播到所有这些表所必需的所有任务。 为说明全局表的一个使用案例,假设您有一个大型客户群跨越三个地理区域 — 美国东...

MySQL三种备份

一)备份分类 1 2 3 4 5 6 7 8 9 10 11 12 冷备:cold backup数据必须下线后备份 温备:warm backup全局施加共享锁,只能读,不能写 热备:hot backup数据不离线,读写都能正常进行 备份的数据集 完全备份:full backup 部分备份:partial backup 备份时的接口(是直接备份数据文...