vue2.0连接阿里云并使用el-upload上传图片

1、首先安装依赖
npm install ali-oss
2、封装client

var OSS = require('ali-oss').Wrapper
export function client() {
  var client = new OSS({
    region: '。。。',
    accessKeyId: '。。。',
    accessKeySecret: '。。。。',
    bucket: '。。。'
  })  //后端提供数据
  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的自动的属性，这里配置根据项目需求，如果需要自定义，按照以下配置
http-request：覆盖默认的上传行为，可以自定义上传的实现
show-file-list：是否显示已上传文件列表，默认是true
multiple：是否支持多选文件
action：必选参数，上传的地址
（如果不自定义上传行为，可以直接在action配置地址就行，没有地址可以为空，但是不能不写action）

• js

引入之前封装的连接阿里服务器的client

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

上传方法

Upload(file) {
      var fileName = 'banner' + file.file.uid 
//定义唯一的文件名，打印出来的uid其实就是时间戳
      client().put(fileName, file.file).then(
result => {
   // 大功搞成  
     //下面是如果对返回结果再进行处理，根据项目需要，下面是我们自己项目所用的，仅供参考
         this.fileList[0] =
            { 
              'name': result.name, 
               'url': result.url 
               }
          uploadBannerPic(this.fileList).then(res => { 
            //根据需要可能项目还需对自己的数据库进行保存
          })
 })
},