vue3+elementplus el-upload组件上传第三方oss存储问题

文件上传功能属于一项基本功能，而随着对象存储的发展，现在项目开发中，大部分都是把文件上传到第三方的oss系统或者自己搭建的oss系统。

而el-upload组件是elementui提供的一个文件上传的组件，其有很多属性和事件，如下图所示是其组件的部分属性，因为其属性和事件比较多，所以el-upload组件也是一个比较有难度的组件。

element-plus el-upload组件文档地址

那么使用el-upload上传组件有哪些坑呢？ 

首先，el-upload组件有一个必填项的参数action，这个参数就是类似于表单提交中的action参数，是要提交的后端地址。

第一个问题就是，如果后端的上传接口是我们自己开发的，那么直接使用action参数的问题也不是很大，因为基本上能满是上传文件的需求。

但如果我们使用第三方的oss系统，那么使用action接口就不太合适了。因为第三方的oss系统大部分并不是直接提供一个上传地址，而是由于各种业务需求，所以做了很多复杂的功能；所以这些oss服务商基本上都是通过提供sdk的形式，给需求端使用。

所以这时我们就要给action设置为action="#"，然后通过http-request属性，来自己实现一个上传函数，来调用oss服务商的sdk ，并构造合适的请求参数。如下图所示：

函数uploadSubmit的主要作用就是调用oss提供的前端sdk进行文件上传，博主使用的是七牛的oss服务，因为可以免费使用一个月。

如下图所示，http-request属性会触发一个函数，并且这个函数会回传一个options的参数。

可能有人会有疑问，这个optinos参数的作用是什么？

其实options参数的作用有很多，而博主这里使用的最重要的一个原因就是可以获取到upload组件上传到文件到file实例。

博主刚开始就是因为获取不到file实例，导致一直卡在这里没办法。最后意外发现，http-request对象竟然有一个回调参数。

这样顺利解决了问题。