阿里云oss h5页面上传实践

最新推荐文章于 2024-04-16 16:06:23 发布

fechild

最新推荐文章于 2024-04-16 16:06:23 发布

阅读量4.9k

点赞数

分类专栏：前端工程化文章标签： oss h5上传实践

本文链接：https://blog.csdn.net/cotexarm7/article/details/85243512

版权

本文详述了如何实现手机端通过H5将图片和视频上传至阿里云OSS服务器的过程，包括上传的目的、工作原理及具体实现步骤，如设置合法的multipart/form-data类型POST请求，并提供了获取token及与OSS服务器交互的实例。

摘要由CSDN通过智能技术生成

一、目的：将手机端的图片或者视频上传至阿里云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: fo

最低0.47元/天解锁文章