目录

1、安装Element-ui

2、安装阿里云的OSS

3、项目使用了Element-ui里面的上传组件（组件代码来自Element-ui官网）

4、如何使用OSS sts授权登录

1、安装Element-ui

npm i element-ui -s

2、安装阿里云的OSS

npm install ali-oss

3、项目使用了Element-ui里面的上传组件（组件代码来自Element-ui官网）

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="uploadFile"
  :on-change="handleChange"
  :file-list="fileList3">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList3: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
      };
    },
    methods: {
      handleChange(file, fileList) {
        this.fileList3 = fileList.slice(-3);
      }
    }
  }
</script>

element-ui的上传组件在选择文件后默认直接上传到action地址，上传成功on-success方法function(response, file, fileList)返回如下参数：

我们使用阿里云的OSS存储服务，需要先获取sts授权，再调用OSS的上传API，所以这时候组件默认上传事件就不适用了，组件提供了 一个http-request参数，可以覆盖默认的方法，在选择文件后不自动上传，我们可以对图片进行操作、压缩等操作从而实现自定义上传

4、如何使用OSS sts授权登录

由于项目里使用的是阿里云的OSS sts授权登陆（什么是sts),通过自定义的规则，向服务器发送一个获取stsToken请求，请求通过后返回结果可以是JSON/xml，拿到里面的AccessKeyId、AccessKeySecret、SecurityToken参数

调用阿里云API主要核心代码如下：

// 调用后台接口返回过来的授权参数AccessKeyId、AccessKeySecret、SecurityToken
let client = new OSS({
    accessKeyId: data.AccessKeyId,
    accessKeySecret: data.AccessKeySecret,
    stsToken: data.SecurityToken,
    region: 'oss-cn-shenzhen', // oss地区
    bucket: '<OSS保存文件的文件名>'
})

// 拿到上传的文件
const f = this.file.raw

// 定义上传文件的名字+后缀
const storeAs = 'product/' + Date.parse(new Date()) + suffix

// 调用上传接口
client.multipartUpload(storeAs, f).then(function (response) {
    if (response.res.status === 200) {
       console.log('上传了')
    }
  }).catch(function (err) {
       console.error('error: ', err)
  })

storeAs是上传文件的名字，可以自定义，一般人会使用时间戳+后缀去定义。缺点是，如果在多线程下可能会出现重名的情况，所以推荐使用uuid+后缀的方式定义名字