本文使用JavaScript客户端签名直传中的put方法
阿里云参考链接：https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1674.1d0d7eaeLZoBBf
前期准备
需要设置CORS，参考上面链接中的步骤3
备注：
本文中使用的是PutObject方法，需要勾选PUT
下文中Callback参数是通过headers传递的，需要配置暴露Headers
使用
- 安装ali-oss
npm install ali-oss --save
- 创建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
- 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))
}
- 上传
client.multipartUpload(filename, file, {
headers: headers
}).then(res => {
// 获取上传成功回调
}).catch(err => {
// 获取上传失败回调
})
参数说明：
filename：图片名称 如：123456demo.png
名称为不重复的随机码（最好由后端返回）
后缀为取上传图片后缀
file: 即为上传图片文件（参考5）
- 结合element-ui el-upload 获取file
<el-upload
action=""
:show-file-list="false"
:http-request="fileChanged"
>
</el-upload>
主要使用自定义方法http-request，触发上传操作，获取file
