先说明一点，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;
},
