Web端PostObject直传实践简介
开发场景:
每个OSS用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或APP端上传文件到应用服务器,应用服务器再把文件上传到OSS。这种方式需通过应用服务器中转,传输效率明显低于数据直转至OSS的方式。
本文主要为:在客户端通过JavaScript代码完成签名,然后通过表单直传数据到OSS。详情请参见JavaScript客户端签名直传。
关于详细的说明文档请至 阿里云官方文档
详细代码在文本超链接 GitHub中
准备工作:
1、项目搭建(本文使用的vue3.0脚手架)
2、查看官方文档 下载浏览器客户端代码,根据文档教程进行测试预览
官方教程示例图:
个人开发历程:
部门以往的项目中,上传OSS均通过应用服务器上传然后再上传到OSS,根据经理要求,通过web端根据服务器返回的签名等信息实现直接上传。
过程1、down官方html代码,更换签名等配置信息实现图片的上传测试。(成功)
过程2、本着前人种树后人乘凉,直接网络搜索关于 vue web直传oss的类似文章。发现大同小异,均是先进行安装 ali-oss、ali-oss-web 依赖包或者是直接script标签引入阿里的sdk 。但是经过对比,发现每个方法最终的oss示例对象都不一致,并且经过测试,出现了各种报错;
过程3、自己动手丰衣足食,直接撸官方代码,简单暴力,无脑操作。
- 1、直接修改初始化vue脚手架项目的 helloword 组件为vueToOss 并更换代码为官方代码的body内容。下面附代码;
- 2、讲script引入的js进行汇总统一放在跟目录utils下,在vueToOss中引入utils 下的js。特别注意一点,引入js后控制台会各种报错,提示很多方法 is not define,此时去修改utils下对应的js的输出方式,“export default xxxx”
- 3、核心js plupload的引入,由于是基于plupload的封装,示例代码中直接引入的是min.js代码,直接引入无效,故直接查找了下 npm的依赖包,点击超链接查看安装方式。如上图所示引入该文件即可;
- 4、改造上传方法的upload.js,处理控制台报错,并且修改下图所示时间为有效期
核心代码: