小程序上传图片到阿里云oss + web

小程序

参考官方文档小程序直传https://help.aliyun.com/document_detail/92883.html?spm=a2c4g.11186623.6.1344.5a5b49e8VqrmMJ

实测无坑

如果使用sts方式。从接口获取accesskey，这个时候报错

<Error>
 <Code>InvalidAccessKeyId</Code>
 <Message>The OSS Access Key Id you provided does not exist in our records.</Message>
.......

查阅资料发现

image.png

在上传的formdata里面加 x-oss-security-token。解决！！！

image.png 返回 image.png

因为改了图片的命名方式

const aliyunFileKey = params.dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';

最后得到的图片地址就是aiyunServerURL + 156574655236098.png(返回的res)

web

官网参考https://help.aliyun.com/document_detail/111265.html?spm=a2c4g.11186623.6.1198.1ce61b92Dmvktj

let client = new OSS({
region: 'oss-cn-beijing',//你的存储空间所在的地点，在OSS后台可以查到。
accessKeyId: res.data.accessKeyId,//accessKeyId,从后台返回
accessKeySecret: res.data.accessKeySecret,//accessKeyId,从后台返回
bucket: '你的bucket名字',//bucket 可以简单理解为存储空间
});

同样采用sts方式上传会出现跟小程序一样的错误：
The OSS Access Key Id you provided does not exist in our records
解决方法

let client = new OSS({
region: 'oss-cn-beijing',//你的存储空间所在的地点，在OSS后台可以查到。
accessKeyId: res.data.accessKeyId,//accessKeyId,从后台返回
accessKeySecret: res.data.accessKeySecret,//accessKeyId,从后台返回
bucket: '你的bucket名字',//bucket 可以简单理解为存储空间
stsToken: res.data.securityToken//加上这一行，问题解决。
});