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

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,处理控制台报错，并且修改下图所示时间为有效期
• 

核心代码：

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