引言
為了更好的掌握 OSS 存儲谢鹊，可以先去了解一下這些基本概念
一败富、準(zhǔn)備工作
創(chuàng)建 Bucket
1哀卫、首先需要一個阿里云帳號粒没，沒有的可以自己去注冊一下
2几颜、登錄之后點(diǎn)擊右上角 -- 控制臺
控制臺.png
3蚯撩、鼠標(biāo)移入箭頭處（圖1）莫矗，會出現(xiàn)圖2粱胜，然后點(diǎn)擊 對象存儲 OSS 柄驻，或者在搜索框搜索 對象存儲 OSS 也可以
對象存儲OSS 15.30.47.png
4、創(chuàng)建 Bucket焙压，名稱和區(qū)域根據(jù)自己的需求填寫即可鸿脓，其他的默認(rèn)選擇就行了，設(shè)置好后點(diǎn)擊確定就創(chuàng)建成功了
創(chuàng)建 Bucket.png
Bucket 步驟.png
5涯曲、怎么查看創(chuàng)建的 Bucket野哭，下圖中點(diǎn)擊紅框里的內(nèi)容就可以查看啦
Bucket 列表.png
6、進(jìn)入列表幻件，點(diǎn)擊創(chuàng)建好的 Bucket ,點(diǎn)擊進(jìn)入拨黔，就可以設(shè)置創(chuàng)建的 Bucket 了，點(diǎn)擊概覽绰沥，就能找到需要在代碼里用到的參數(shù)了
- region里填寫的是參數(shù)1對應(yīng)的綠框里的內(nèi)容
- bucket里填寫的是參數(shù)2對應(yīng)的綠框里的內(nèi)容篱蝇，即你創(chuàng)建的 Bucket 名稱
查看需要的參數(shù).png
7、獲取 accessKeyId 和 accessKeySecret
點(diǎn)擊頭像 --> AccessKey 管理 --> 創(chuàng)建 AccessKey 徽曲，第一次創(chuàng)建的時候零截，會提示下載 ID 與密碼，建議下載秃臣，至此涧衙，所需的參數(shù)就都拿到了
- accessKeySecret 填寫的是拿到的密碼
- accessKeyId 填寫的是 AccessKey ID ，即剛剛拿到的 ID
AccessKey 管理.png
二奥此、Vue 上傳圖片到阿里云
1弧哎、安裝 ali-oss
npm install ali-oss
2、創(chuàng)建工具類文件
在 utils 文件夾內(nèi)創(chuàng)建一個 alioss.js 文件
function uploadFile (file, ossConfig, resultUrl) {
const OSS = require('ali-oss')
// 這里是通過接口拿到的這些參數(shù)得院，所以在調(diào)用該方法之前傻铣，需調(diào)用后臺接口先拿到這些參數(shù)
// 如果這些參數(shù)不是通過后臺接口拿到的話，可以從上邊介紹的第6條中祥绞，找到需要的參數(shù)放過來就可以了
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 圖片上傳組件的使用了两踏，直接講調(diào)用 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 配置參數(shù)沒有經(jīng)過后臺接口败京，則忽略 ossConfig 參數(shù)，如果是接口獲取的梦染，則先調(diào)用接口拿到參數(shù)
uploadFile(e.file, this.ossConfig, function (res) {
if (res === undefined) {
return ''
} else {
// 更新展示的圖片地址, res.name 為圖片的名稱赡麦，此處寫自己的邏輯代碼即可
console.log(res.name)
}
})
}
