vue 版本上传文件直传阿里云OSS

电玩女神 2023-05-28 11:18 31阅读 0赞

# Web端PostObject直传实践简介 #

开发场景：

>        每个OSS用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或APP端上传文件到应用服务器，应用服务器再把文件上传到OSS。这种方式需通过应用服务器中转，传输效率明显低于数据直转至OSS的方式。
> 
> 本文主要为：在客户端通过JavaScript代码完成签名，然后通过表单直传数据到OSS。详情请参见[JavaScript客户端签名直传][JavaScript]。

关于详细的说明文档请至 [阿里云官方文档][Link 1]

详细代码在文本超链接 GitHub中

准备工作：

1、项目搭建（本文使用的vue3.0脚手架）

2、查看官方文档 下载[浏览器客户端代码][Link 2]，根据文档教程进行测试预览

官方教程示例图：

![format_png][]

个人开发历程：

部门以往的项目中，上传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”![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70][]
 *  3、核心js plupload的引入，由于是基于plupload的封装，示例代码中直接引入的是min.js代码，直接引入无效，故直接查找了下 npm的[依赖包][Link 3]，点击超链接查看安装方式。如上图所示引入该文件即可；![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 1][]
 *  4、改造上传方法的upload.js,处理控制台报错，并且修改下图所示时间为有效期
 *  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 2][]

核心代码：

[点击跳转github ，如果有帮助，可以start一下。][github _start]

[JavaScript]: https://help.aliyun.com/document_detail/31925.html#concept-frd-4gy-5db
[Link 1]: https://help.aliyun.com/document_detail/112718.html?spm=a2c4g.11186623.6.1515.736b4367BqLlEd
[Link 2]: http://gosspublic.alicdn.com/doc/oss-h5-upload-js-direct.zip?spm=a2c4g.11186623.2.16.1de449e8wihbgG&file=oss-h5-upload-js-direct.zip
[format_png]: /images/20230528/73bdc4e05cfd4b9aa89ecef2220fd19f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70]: /images/20230528/8a5d0671126f4b1f80c9e7d0a810cb1e.png
[Link 3]: https://www.npmjs.com/package/plupload
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 1]: /images/20230528/74690604a29f48ad83f04251d48228b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg_size_16_color_FFFFFF_t_70 2]: /images/20230528/ae0ec135db994c5fbd6eada53ea69827.png
[github _start]: https://github.com/SnowBeatRain/vue-ali-oss