阿里云oss h5页面上传实践

一、目的：将手机端的图片或者视频上传至阿里云oss服务器，同时返回资源url

二、原理：https://help.aliyun.com/document_detail/31988.html?spm=a2c4g.11186623.2.13.2e2e350aF5un5N

发送合法的content-type为multipart/form-data的post请求到阿里云服务器。

一个合法的请求如下，具体的字段含义和获取方法参考上面的官方文档：

POST / HTTP/1.1 
Host: BucketName.oss-cn-hangzhou.aliyuncs.com
User-Agent: browser_data
Content-Length：ContentLength
Content-Type: multipart/form-data; boundary=9431149156168
--9431149156168
Content-Disposition: form-data; name="key"
key
--9431149156168
Content-Disposition: form-data; name="success_action_redirect"
success_redirect
--9431149156168
Content-Disposition: form-data; name="Content-Disposition"
attachment;filename=oss_download.jpg
--9431149156168
Content-Disposition: form-data; name="x-oss-meta-uuid"
myuuid
--9431149156168
Content-Disposition: form-data; name="x-oss-meta-tag"
mytag
--9431149156168
Content-Disposition: form-data; name="OSSAccessKeyId"
access-key-id
--9431149156168
Content-Disposition: form-data; name="policy"
encoded_policy
--9431149156168
Content-Disposition: form-data; name="Signature"
signature
--9431149156168
Content-Disposition: form-data; name="file"; filename="MyFilename.jpg"
Content-Type: image/jpeg
file_content
--9431149156168
Content-Disposition: form-data; name="submit"
Upload to OSS
--9431149156168--

三、实现方法

3.1 html

    <input ref="input" type="file" name="image" accept="image/gif, image/jpeg, image/png" @change="getFile"/>

3.2 js-- ossUpload.js

import request from 'superagent'
import Base64 from './Base64';
import './hmac';
import './sha1';
import Crypto from './crypto';

// const STS_TOKEN_URL = `https://ke.yuanfudao.com/fenbi-oss-server/api/image/public/uploadToken?format=`;
const STS_TOKEN_URL = `https://ke.yuanfudao.ws/fenbi-oss-server/api/image/public/uploadToken?format=`;

function getPolicyBase64() {
  const date = new Date();
  date.setHours(date.getHours() + 10);
  const srcT = date.toISOString();
  const policyText = {
    expiration: srcT, // 设置该Policy的失效时间
    conditions: [
      ['content-length-range', 0, 50 * 1024 * 1024], // 设置上传文件的大小限制,50MB
    ],
  };
  return Base64.encode(JSON.stringify(policyText));
}

function getSignature(policyBase64, accessSecret) {
  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accessSecret, {
    asBytes: true,
  });

  return Crypto.util.bytesToBase64(bytes);
}


function uploadFile (res, tempFile) {
  console.log(res)
  const policy = getPolicyBase64()
  const signature = getSignature(policy, res.sts.accessSecret)

  let fd = new FormData()
  let formData = {
    key: res.imageId,
    OSSAccessKeyId: res.sts.accessId,
    policy,
    Signature: signature,
    success_action_status: '200',
    'x-oss-security-token': res.sts.securityToken,
    file: tempFile
  }
  for(name in formData) {
    fd.append(name, formData[name])
  }

  return new Promise ((resolve, reject) => {
    let url = 'https://img-pub-test.oss-cn-beijing.aliyuncs.com'
    // let url = 'https://img-pub.yuanfudao.com'
    request.post(url)
           .withCredentials()
           .send(fd)
           .then(() => { 
              resolve(`${res.sts.cdn || `https://${res.sts.host}`}/${res.imageId}`)
            })
           .catch(err => { reject(err) })
  })
}

export default function (tempUrl, format = 'png') {
  return request.get(`${STS_TOKEN_URL}${format}`).withCredentials().then(res => uploadFile(res.body, tempUrl));
}

import ossUpload from 'ossUpload.js'
ossUpload(this.$refs.input.files[0], 'jpg').then(res => {
  console.log(res)
})

四、结果如下：

获取token

curl 'https://ke.yuanfudao.ws/fenbi-oss-server/api/image/public/uploadToken?format=jpg' -H 'origin: https://conan.yuanfudao.ws' -H 'accept-encoding: gzip, deflate, br' -H 'accept-language: zh-CN,zh;q=0.9' -H 'user-agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1' -H 'accept: */*' -H 'referer: https://conan.yuanfudao.ws/h5/conan-web-page-jf/jf11.html' -H 'authority: ke.yuanfudao.ws' -H 'cookie: deviceId=1534818621490-55547; _ga=GA1.2.1195815153.1535601484; sid=3275684664355854343; userid=17722017; JSESSIONID=F2A0E1B1EAA14EECF9A3B2ACD7BC9CA2; _gid=GA1.2.447306510.1545704226; _gat_gtag_UA_123968838_1=1; _gat=1; persistent="IdGnfVz/xIGtGezlxQgvoylG8gZCW1RJS0jezVN92BbUPXpQE7ROj9FefKcTX/jSLLUgXPwti2HrPtL0r+KRYg=="; sess="TREKMtyKnbeV64Q0J/UtIwYCSvgEXQxZ2W7pWmh8VYooNdhTvIKeyyI1MP/DoAwg80cP8YP/zCBV3vIk/n9OEjcgYKXdKA6N6CSsT++5/Zg="' --compressed

请求阿里云oss服务器

curl 'https://img-pub-test.oss-cn-beijing.aliyuncs.com/' -H 'Referer: https://conan.yuanfudao.ws/h5/conan-web-page-jf/jf11.html' -H 'Origin: https://conan.yuanfudao.ws' -H 'User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1' -H 'Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryAytA5Ic6RsA9Iaw9' --data-binary $'------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="key"\r\n\r\n167e327606d2d33.jpg\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="OSSAccessKeyId"\r\n\r\nSTS.NK6DzfX5QESHic8xbS2kQR5es\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="policy"\r\n\r\neyJleHBpcmF0aW9uIjoiMjAxOC0xMi0yNVQxMjoxNzo0OC4wOTdaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsNTI0Mjg4MDBdXX0=\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="Signature"\r\n\r\nIIb3wfaOghY5ZRwpH6NaB1jIkLI=\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="success_action_status"\r\n\r\n200\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="x-oss-security-token"\r\n\r\nCAISrAJ1q6Ft5B2yfSjIr4iDD8DStepw8pGja0WJnGIGPuR9vfDOkTz2IHBEe3hoCOkYv/g3n2FR7PgclqB6TZhDVEnDcNAoe2LGA5XlMeT7oMWQweEuYfTHcDHhH3yW9cvWZPqDA7G5U/yxalfCuzZuyL/hD1uLVECkNpv77vwCac8MDDGlcR1MBtpdOnFAyqkgOGDWKOymPzPzn2PUFzAIgAdnjn5l4qnNhK/Y4xHF3lrh0b1X9cajI52rKtFxNtJjXsypm7UoKaeainEOs0ZGrqst1+pG4TjlxojFWQcMuU3db7GLrY02d1ZDC/JkS/Ienp/VjuZlv+HfrYPzxitWMPtdOyalH9Dwn5qcSbr3Z4phLueiYSqTyLSOM5awqx4uJG4WLx9awBSB4cGriHUagAGAGZGbZbLoAEjshxJ7IZ6+1OQInpvEW8OVeSU+4zFt/V/PJqTw9Gi+uF5qd0o4OkoelMqAeMan56jGH66HtAyzl+Bid73pwQP76odxWLWtIx6YkcCwZwCH4Kc6vLtm9oKcWflfOZeMlTNIgBJSZE7D4BgC15kL3CBjZC7RAWNpjA==\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9\r\nContent-Disposition: form-data; name="file"; filename="企业微信截图_a7ec7648-05af-4482-94ed-5a82ca96e175(1).png"\r\nContent-Type: image/png\r\n\r\n\r\n------WebKitFormBoundaryAytA5Ic6RsA9Iaw9--\r\n' --compressed