阿里云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

阿里云oss h5页面上传实践相关推荐

使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
使用阿里云OSS实现文件上传
概述场景文件上传,是程序开发中必须会使用到的一个功能,比如: 添加商品,用户头像,文章封面等需求富文本编辑(插件文件上传) 文件上传的原理是什么? 我们为什么要实现文件上传,其实就要共享资源,大家 ...
Spring boot上传文件（图片）到阿里云OSS（直接上传到应用服务器）
Spring boot上传文件(图片)到阿里云OSS(直接上传到应用服务器) 主要思路上传图片的思路有两种: 第一种是上传到应用服务器,再由应用服务器上传到OSS.这种适合上传的文件较小,较为简单, ...
阿里云 OSS SDK ：上传的图片直接访问变成下载问题解决
文章目录阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因 2.解决方案阿里云 OSS SDK :上传的图片直接访问变成下载问题解决 1.产生原因上传的文件,未指定文件访 ...
vue plupload 的使用，阿里云OSS PHP 安全上传
1. 首选npm安装plupload 2. 阿里云OSS PHP 安全上传 <template> <div class="imgUpload"> ...
阿里云oss简单的上传下载删除（java）
阿里云oss上传和下载. 配置maven  ...
**关于阿里云oss图片批量上传问题解析**
关于阿里云oss图片批量上传问题解析背景最近在项目开发过程中遇到的问题,消耗了比较久的时间,过程曲折,虽然最终达到目的,但是鉴于各种常用的云数据在对象存储方面大同小异,所以记录一下. 理一下思路: ...
Typora + Picgo + 阿里云oss实现图片上传
Typora + Picgo + 阿里云oss实现图片上传设置原因 Typora是一款markdown文本编辑器,无法承载本地图片存储的功能,书写好的文章上传到博客或其他设备上时会导致图片丢失,无法 ...
Java基于阿里云OSS实现视频上传
file类型的input输入框获得value时可使用: <input type="file" name="videoPath" id="vv&q ...

阿里云oss h5页面上传实践

阿里云oss h5页面上传实践相关推荐

最新文章

热门文章