引言
为了更好的掌握 OSS 存储，可以先去了解一下这些基本概念
一、准备工作
创建 Bucket
1、首先需要一个阿里云帐号，没有的可以自己去注册一下
2、登录之后点击右上角 -- 控制台
控制台.png
3、鼠标移入箭头处（图1），会出现图2，然后点击 对象存储 OSS ，或者在搜索框搜索 对象存储 OSS 也可以
对象存储OSS 15.30.47.png
4、创建 Bucket，名称和区域根据自己的需求填写即可，其他的默认选择就行了，设置好后点击确定就创建成功了
创建 Bucket.png
Bucket 步骤.png
5、怎么查看创建的 Bucket，下图中点击红框里的内容就可以查看啦
Bucket 列表.png
6、进入列表，点击创建好的 Bucket ,点击进入，就可以设置创建的 Bucket 了，点击概览，就能找到需要在代码里用到的参数了
- region里填写的是参数1对应的绿框里的内容
- bucket里填写的是参数2对应的绿框里的内容，即你创建的 Bucket 名称
查看需要的参数.png
7、获取 accessKeyId 和 accessKeySecret
点击头像 --> AccessKey 管理 --> 创建 AccessKey ，第一次创建的时候，会提示下载 ID 与密码，建议下载，至此，所需的参数就都拿到了
- accessKeySecret 填写的是拿到的密码
- accessKeyId 填写的是 AccessKey ID ，即刚刚拿到的 ID
AccessKey 管理.png
二、Vue 上传图片到阿里云
1、安装 ali-oss
npm install ali-oss
2、创建工具类文件
在 utils 文件夹内创建一个 alioss.js 文件
function uploadFile (file, ossConfig, resultUrl) {
const OSS = require('ali-oss')
// 这里是通过接口拿到的这些参数，所以在调用该方法之前，需调用后台接口先拿到这些参数
// 如果这些参数不是通过后台接口拿到的话，可以从上边介绍的第6条中，找到需要的参数放过来就可以了
const client = new OSS({
region: ossConfig.region,
accessKeyId: ossConfig.accessKeyId,
accessKeySecret: ossConfig.accessKeySecret,
bucket: ossConfig.bucket
})
async function put () {
try {
// 这里加个时间戳，目的是以防有同名的文件被覆盖
var timestamp = (new Date()).getTime()
var fileName = ossConfig.path + '/' + timestamp + '/' + file.name
// 上传到OSS
const result = await client.put(fileName, file)
console.log(result)
console.log('阿里云OSS上传文件接口返回：', result)
resultUrl(result)
} catch (e) {
console.log('阿里云OSS上传文件接口返回错误：', e)
resultUrl()
}
}
return put()
}
export {
uploadFile
}
3、在 vue 文件中引入并使用
- 引入
import { uploadFile } from '@/utils/utils'
- 使用 Element 的图片上传组件，这里就不介绍 element 图片上传组件的使用了，直接讲调用 uploadFile 方法
uploadImg (e) {
console.log(e)
if (e.file.type !== 'image/jpeg' && e.file.type !== 'image/png' && e.file.type !== 'image/jpg' &&
e.file.type !== 'image/bmp' && e.file.type !== 'image/gif') {
this.$message.error('请选择图片文件')
return
}
const isLt5M = e.file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!')
return
}
// 如果 oss 配置参数没有经过后台接口，则忽略 ossConfig 参数，如果是接口获取的，则先调用接口拿到参数
uploadFile(e.file, this.ossConfig, function (res) {
if (res === undefined) {
return ''
} else {
// 更新展示的图片地址, res.name 为图片的名称，此处写自己的逻辑代码即可
console.log(res.name)
}
})
}
