1、首先安裝依賴
npm install ali-oss
2、封裝client
var OSS = require('ali-oss').Wrapper
export function client() {
var client = new OSS({
region: '。。屋灌。',
accessKeyId: '。。。',
accessKeySecret: '净神。遍膜。驾讲。。',
bucket: '。。尉咕。'
}) //后端提供數(shù)據(jù)
return client
}
3、頁(yè)面使用
- HTML
<el-upload :http-request="Upload" :multiple="true"
:show-file-list="false" action="">
<el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
</el-upload>
因?yàn)闃邮綖樽远x的 所以沒(méi)有用element的自動(dòng)的屬性璃岳，這里配置根據(jù)項(xiàng)目需求年缎，如果需要自定義，按照以下配置
http-request：覆蓋默認(rèn)的上傳行為铃慷，可以自定義上傳的實(shí)現(xiàn)
show-file-list：是否顯示已上傳文件列表单芜，默認(rèn)是true
multiple：是否支持多選文件
action：必選參數(shù)，上傳的地址
（如果不自定義上傳行為犁柜，可以直接在action配置地址就行洲鸠，沒(méi)有地址可以為空，但是不能不寫(xiě)action）
- js
引入之前封裝的連接阿里服務(wù)器的client
import { client } from '@/utils/alioss'
上傳方法
Upload(file) {
var fileName = 'banner' + file.file.uid
//定義唯一的文件名馋缅，打印出來(lái)的uid其實(shí)就是時(shí)間戳
client().put(fileName, file.file).then(
result => {
// 大功搞成
//下面是如果對(duì)返回結(jié)果再進(jìn)行處理扒腕，根據(jù)項(xiàng)目需要淤齐，下面是我們自己項(xiàng)目所用的，僅供參考
this.fileList[0] =
{
'name': result.name,
'url': result.url
}
uploadBannerPic(this.fileList).then(res => {
//根據(jù)需要可能項(xiàng)目還需對(duì)自己的數(shù)據(jù)庫(kù)進(jìn)行保存
})
})
},
