vue上传图片到阿里OSS

有不少同学在问vue上传文件到阿里oss的问题，我之前也遇到过，现在给同学们分享一下我的方法

先说明一点，web端上传的方式有3种：
1、JavaScript客户端签名直传
2、服务端签名后直传
3、服务端签名直传并设置上传回调
我用的是第二种服务端签名后直传，上传组件是饿了么的Upload 上传。

1、服务端做签名（这是后端干的，如果您是纯前端就忽略吧）

let now = new Date()
now = now.setMinutes(now.getMinutes() + config.ALIYUN.get('EXPIRATION')) // 这是您自己定的签名有效时间(我这里是以分钟为单位)
let expiration = new Date(now)
var policyText = {
  'expiration': expiration, // 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
  'conditions': [
    ['content-length-range', 0, config.ALIYUN.get('CONTENTLENGTHRANGE')] // 自定义设置上传文件的大小限制
  ]
}
var accessid = config.ALIYUN.get('ACCESSKEY') // ACCESSKEY、SECRETKEY都是阿里云申请的
var accesskey = config.ALIYUN.get('SECRETKEY')
var policyBase64 = Base64.encode(JSON.stringify(policyText)) // 这之后的都是加密和签名，Base64用的是js-base64包，CryptoJS用的是crypto-js包
var message = policyBase64
var bytes = CryptoJS.HmacSHA1(message, accesskey)
var signature = bytes.toString(CryptoJS.enc.Base64)

this.body = { // 这里就是返回数据了
  policy: policyBase64,
  OSSAccessKeyId: accessid,
  signature: signature
}

2、前端获取签名

现在剩下的就是前端的工作了，前端先从服务端获取签名，再上传图片。
前端从服务端获取数据的方式很多，比如ajax、superagent等，用自己熟悉的吧，这里就不说了。直接说说饿了么的上传组件吧。

<el-upload class="avatar-uploader" :action="uploadHost" accept="image/*" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" :data="ossParams">
  
</el-upload>

参数说明：
action：您创建oss的外网地址
accept：接受的文件类型
on-success：上传成功的回调函数
before-upload：上传前的回调函数，可以在这里做文件大小验证等
data：这里放您从服务端获取到的签名数据

核心代码如下：

// data字段
ossParams: { 
  key: '', // key后面有用，先默认设空字符串
  success_action_status: '200', // 默认200
}

// 从服务端获取到签名的处理
let r = await request.get(process.env.OSS_TOKEN)
Object.assign(this.ossParams, r.body)

// 生成随机字符串
randomString() {
  return (new Date % 9e6).toString(36) + Math.random().toString(36).substring(2, 7)
},

// 上传成功的回调
handleSuccess(res, file) {
  this.imageUrl = this.uploadHost + '/' + this.ossParams.key
  console.info(this.imageUrl)
},

// 上传之前的回调
beforeUpload(file) {
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  this.ossParams.key = `${this.type}/${this.randomString()}.${file.type.split('/').pop()}`
  return isLt2M;
},

更多详细流程及用法请移驾oss文档、饿了么Upload组件，感谢您的阅读。