阿里云oss上传文件前端相关处理

oss：阿里云推出的对象存储服务，简单来说，就是存储文件的地方，类似磁盘这样的东西。阿里云oss js版sdk文档地址

前端处理上传文件的处理方式有两种参考地址

• 前端直传，使用post方式传formdata
• 使用js版 sdk new OSS类实现

前端直传

代码如下，可参考JavaScript客户端签名直传

//构造formdata对象，key属性为文件的标识符，一般为文件名称，如果后面加/则为文件路径
var oMyForm = new FormData()
    oMyForm.append('key', 'test')
    oMyForm.append('file', file)
//使用post请求,发送文件
var oReq = new XMLHttpRequest()
    oReq.open('POST', 'https://bucket.region.aliyuncs.com')
    oReq.send(oMyForm)
    if (oReq.status == 204) {
      console.log(oReq)
    }

以上方式为不需要signuature的方式，但是一般情况下上传文件都是设置了相关的权限校验，同时关于id和secret这些信息不能暴露在前端，这个时候一般都是后台生成一个临时token给到前端，前端上传的时候传入这个临时的token，一般采用这种方式传，这个时候，构造的formdata里面就需要加入OSSAccessKeyId，policy，Signature这几个信息

oMyForm.append('OSSAccessKeyId', client.accessKeyId)
    oMyForm.append('policy', policy)
    oMyForm.append('Signature', signature)

其中 OSSAccessKeyId一般为后台传递给前台的值，policy和signature需要前端生成，
signature的生成可参考如下代码参考地址

var policyText = {
      expiration: client.expiration, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
      conditions: [
        ['content-length-range', 0, 1048576000], // 设置上传文件的大小限制
      ],
    }

    var policyBase64 = Base64.encode(JSON.stringify(policyText))
    var message = policyBase64
    console.log(sha1)
    var bytes = Crypto.HMAC(sha1, message, client.accessKeySecret, {
      asBytes: true,
    })
    var signature = Crypto.util.bytesToBase64(bytes)

使用sdk实现

这种形式是官方推荐的，同时也比较的方便,直接参考 官方文档

    this.uploadOssService
      .getToken()
      .pipe(finalize(() => {}))
      .subscribe(res => {
        const uploadFileClient = new OSS({
          region: res.region,
          accessKeyId: res.accessKeyId,
          accessKeySecret: res.accessKeySecret,
          stsToken: res.stsToken,
          bucket: res.bucket,
          endpoint: res.endpoint,
        })
        uploadFileClient
        .put('eee', file)
        .then((res: any) => {
         console.log(res)
        })
        .catch((err: any) => {
          console.log(err)
        })
    })

getToken方法通过后台接口获取临时token，如果不需权限校验的话，相关数据可直接在前端写死就可以