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、頁面使用

• HTML

<el-upload :http-request="Upload" :multiple="true" 
:show-file-list="false" action="">
 <el-button size="small" type="primary">點擊上傳</el-button>
</el-upload>

因為樣式為自定義的 所以沒有用element的自動的屬性，這里配置根據(jù)項目需求，如果需要自定義，按照以下配置
http-request：覆蓋默認(rèn)的上傳行為，可以自定義上傳的實現(xiàn)
show-file-list：是否顯示已上傳文件列表，默認(rèn)是true
multiple：是否支持多選文件
action：必選參數(shù)，上傳的地址
（如果不自定義上傳行為，可以直接在action配置地址就行，沒有地址可以為空，但是不能不寫action）

• js

引入之前封裝的連接阿里服務(wù)器的client

import { client } from '@/utils/alioss'

上傳方法

Upload(file) {
      var fileName = 'banner' + file.file.uid 
//定義唯一的文件名，打印出來的uid其實就是時間戳
      client().put(fileName, file.file).then(
result => {
   // 大功搞成  
     //下面是如果對返回結(jié)果再進(jìn)行處理，根據(jù)項目需要，下面是我們自己項目所用的，僅供參考
         this.fileList[0] =
            { 
              'name': result.name, 
               'url': result.url 
               }
          uploadBannerPic(this.fileList).then(res => { 
            //根據(jù)需要可能項目還需對自己的數(shù)據(jù)庫進(jìn)行保存
          })
 })
},