阿里云oss上传图片遇到的坑

正常情况下照着阿里云上面的文档操作应该是没有问题的,但是我就是要按自己方式来,就掉坑里了...

我还提交了工单,搞了两天,才弄好~

代码也贴上来吧,万一哪天github不让我访问了....

后端生成STS:用这种方式就可以了,并不一定要按OSS上面引入 @alicloud/pop-core

// 引入sdk
import {STS} from 'ali-oss'
1:
const client = new STS({
  accessKeyId: conf.AccessKeyId,
  accessKeySecret: conf.AccessKeySecret
});
2:
const result = await client.assumeRole(conf.RoleArn, policy, conf.TokenExpireTime)

这result里就有临时生成的AccessKeyId, AccessKeySecret, SecurityToken 然后返回给前端

后端主要代码生成signature和policy代码MpUploadOssHelper参考:https://github.com/luozhang002/oss-sign-policy?spm=a2c4g.11186623.2.24.434358abRO5uh0

const mpHelper = new MpUploadOssHelper({
      accessKeyId: result.credentials.AccessKeyId,
      accessKeySecret: result.credentials.AccessKeySecret,
      timeout: 1,     // 限制参数的有效时间(单位: 小时)
      maxSize: 5     // 限制上传文件大小(单位: Mb)
    });
    // 生成的参数
    const params = mpHelper.createUploadParams()
    params.token = result.credentials.SecurityToken
    logger.info(params)
    ctx.body = params

前端主要代码:

function upload(file, opt) {
        const formData = new FormData()
        formData.append('key', 'images/putobj.png')
        formData.append('policy', opt.policy)
        formData.append('OSSAccessKeyId', opt.accessKeyId)
        formData.append('success_action_status', '200')
        formData.append('x-oss-security-token', opt.token)
        formData.append('signature', opt.signature)
        formData.append('file', file)
        fetch(
          'http://tovinping.oss-cn-shenzhen.aliyuncs.com',
          {
            method: 'POST',
            body: formData
          }
        ).then(res => {
          console.log(res)
        }).catch(e => {
          console.log(e)
        })
      }

那么坑在哪里呢?呵呵呵呵~~就是不要搞乱formData.append的顺序.....之前顺序不是这样的,上传的时候一直报403;他们工程师工作量大,可能不止服务我一个有,搞了两天才发现~~~

你可能感兴趣的:(前端)