内容简介:首先看一下官网的说明。我是官网文档链接阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量、安全、低成本、高可靠的云存储服务。其数据设计持久性不低于 99.999999999%,服务设计可用性不低于 99.99%。OSS 具有不受平台限制的 RESTful API 接口,您可以在任何应用、任何时间、任何地点存储和访问任意类型的数据。您可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移工具轻松地将海量数据移入或移出阿里云 OSS。数据存储到阿里云 OS
首先看一下官网的说明。我是官网文档链接
阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量、安全、低成本、高可靠的云存储服务。其数据设计持久性不低于 99.999999999%,服务设计可用性不低于 99.99%。OSS 具有不受平台限制的 RESTful API 接口,您可以在任何应用、任何时间、任何地点存储和访问任意类型的数据。
您可以使用阿里云提供的 API、SDK 接口或者 OSS 迁移 工具 轻松地将海量数据移入或移出阿里云 OSS。数据存储到阿里云 OSS 以后,您可以选择标准类型(Standard)的阿里云 OSS 服务作为移动应用、大型网站、图片分享或热点音视频的主要存储方式,也可以选择成本更低、存储期限更长的低频访问类型(Infrequent Access)和归档类型(Archive)的阿里云 OSS 服务作为不经常访问数据的备份和归档。
简单理解,就是一个大型的Object
{ parent { children } } 复制代码
怎么使用?
官网提供了多种语言版本的SDK示例,我这里使用的是Node版本的。
-
使用 NPM 安装
ali-oss
Node.js >= 8.0.0 如果需要在 Node.js < 8 的环境中使用,请使用 ali-oss 4.x版本。
npm install ali-oss 复制代码
- 创建实例,OSS NodeJS SDK同时支持同步和异步的使用方式
- 同步方式:基于async和await方式,异步编程同步化
- 异步方式:类似callback的方式,API接口返回Promise,使用.then()处理返回结果,使用.catch()处理错误
ali-oss.js
// 引入ali-oss let OSS = require('ali-oss') /** * [accessKeyId] {String}:通过阿里云控制台创建的AccessKey。 * [accessKeySecret] {String}:通过阿里云控制台创建的AccessSecret。 * [bucket] {String}:通过控制台或PutBucket创建的bucket。 * [region] {String}:bucket所在的区域, 默认oss-cn-hangzhou。 */ let client = new OSS({ region: '<oss region>', //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。 accessKeyId: '<Your accessKeyId>', accessKeySecret: '<Your accessKeySecret>', bucket: '<Your bucket name>' }) 复制代码
- 调用API的方法
ali-oss.js
/** * 上传文件,大小不能超过5GB * @param {string} ObjName OSS的储存路径和文件名字 * @param {string} fileUrl 本地文件 * * @retruns Promise */ export const put = async (ObjName, fileUrl) => { try { let result = await client.put(`AAA/${ObjName}`, fileUrl) // AAA为文件夹, ObjName为文件名字,可以只写名字,就直接储存在 bucket 的根路径 console.log(result) return result } catch (e) { console.log(e) } } 复制代码
使用Element-UI的 Upload 组件封装上传
Element-UI的 Upload 组件有一个 http-request
配置,可以自定义上传方法,覆盖默认的。
直接贴代码
<template> <div class="hello"> <el-upload class="upload-demo" action :http-request="handleUpload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :before-remove="beforeRemove" multiple :limit="limit" :on-exceed="handleExceed" :file-list="fileList" :list-type="listType" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">{{ tip }}</div> </el-upload> </div> </template> <script> import { put, getFileNameUUID } from '@/utils/ali-oss' export default { name: 'Upload', props: { tip: { type: String, default: '上传大小不能超过80M' }, limit: { type: Number, default: 1 }, action: { type: String, default: '' }, headers: { type: Object, default: () => {} }, name: { type: String, default: '' }, listType: { type: String, default: 'text' } }, data() { return { fileList: [] } }, methods: { handleRemove(file, fileList) { this.$emit('on-remove', file, fileList) }, handlePreview(file) { this.$emit('on-preview', file) }, handleExceed(files, fileList) { this.$message.warning(`每次只能上传 ${this.limit} 个文件`) }, beforeRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`) }, handleSuccess(response, file, fileList) { this.fileList = fileList this.$emit('on-success', file, fileList) }, /** * 自定义上传方法 */ handleUpload(option) { // 生成的文件名称 let objName = getFileNameUUID() // 调用 ali-oss 中的方法 put(`aaaaaa${objName}`, option.file).then(res => { console.log(res) }) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- axios上传图片,koa2接收保存上传的图片,lrz在上传前压缩图片
- 前端实现axios以表单方式上传文件,优化上传速度
- JeeSite V4.1.4 发布,支持分片上传、多线程上传
- SpringMVC教程--图片上传
- 文件上传限制绕过
- 文件上传限制绕过技巧
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
黑客攻防技术宝典(第2版)
[英] Dafydd Stuttard、[英] Marcus Pinto / 石华耀、傅志红 / 人民邮电出版社 / 2012-6-26 / 99.00元
内容简介: Web应用无处不在,安全隐患如影随形。承载着丰富功能与用途的Web应用程序中布满了各种漏洞,攻击者能够利用这些漏洞盗取用户资料,实施诈骗,破坏其他系统等。近年来,一些公司的网络系统频频遭受攻击,导致用户信息泄露,造成不良影响。因此,如何确保Web应用程序的安全,已成为摆在人们眼前亟待解决的问题。 本书是Web安全领域专家的经验结晶,系统阐述了如何针对Web应用程序展开攻击与......一起来看看 《黑客攻防技术宝典(第2版)》 这本书的介绍吧!