vue&element-ui&oss上传图片

本文使用JavaScript客户端签名直传中的put方法
阿里云参考链接：https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1674.1d0d7eaeLZoBBf

前期准备

需要设置CORS，参考上面链接中的步骤3
备注：
本文中使用的是PutObject方法，需要勾选PUT
下文中Callback参数是通过headers传递的，需要配置暴露Headers

使用

1. 安装ali-oss

npm install ali-oss --save

2. 创建OSS对象

const OSS = require('ali-oss')
const client = new OSS({
    region: region,
    accessKeyId: accessKeyId,
    accessKeySecret: accessKeySecret,
    stsToken: stsToken,
    bucket: bucket
  })

OSS参数说明

后端通过STS方式临时授权访问OSS方式获取上面的参数
1、region——Region Id
可以写成固定，最好由后端返回
阿里云参考链接：https://help.aliyun.com/document_detail/140601.html?spm=5176.10695662.1996646101.searchclickresult.38c419c2d2iHeb

3. Callback
   只需要在发送给 OSS 的请求中携带相应的 Callback 参数，即能实现回调
   参考链接：https://help.aliyun.com/document_detail/31989.html?spm=a2c4g.11186623.4.4.3e7f6eddRY99xG

Callback、callback-var参数是由一段经过 base64 编码的 JSON 字符串
引入base64

安装
npm install --save js-base64

使用

const Base64 = require('js-base64').Base64

拼接第一个参数：Callback 参数

 const callback = {}
 callback.callbackUrl = 'callbackUrl'
 callback.callbackBody = 'callback'
 callback.callbackBodyType = 'application/json'

备注：
callbackHost，设置callbackUrl后，会自动获取，没有手动设置

拼接第二个参数：callback-var（自定义参数）
自定义参数，根据具体业务场景选择是否传递
包含自定义参数，后端返回的callbackBody格式为：
key=(etag)&my_var=$(x:my_var)
其中x:my_var即为自定义参数

  const callbackVar = {
    'x:my_var': 'my_var'
  }

参数组成headers
callback使用x-oss-callback
callback-var使用x-oss-callback-var

  const headers = {
      'x-oss-callback': Base64.encode(JSON.stringify(callback)),
      'x-oss-callback-var': Base64.encode(JSON.stringify(callbackVar))
    }

4. 上传

  client.multipartUpload(filename, file, {
    headers: headers
  }).then(res => {
    // 获取上传成功回调
  }).catch(err => {
    // 获取上传失败回调
  })

参数说明：
filename：图片名称 如：123456demo.png
名称为不重复的随机码（最好由后端返回）
后缀为取上传图片后缀

file: 即为上传图片文件（参考5）

5. 结合element-ui el-upload 获取file

主要使用自定义方法http-request，触发上传操作，获取file