我在这里使用的是elementplus的 <el-upload> 组件
使用elementplus上传到阿里的OSS上，就是直接从本地对接阿里的OSS服务器，不会消耗公司服务器的带宽，下面是相关代码：
<el-upload
v-model:file-list="fileList"
action="https://xxx.oss-cn-di.aliyuncs.com"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:data="uploadData"
:before-upload="beforeUpload"
>
<el-icon><Plus /></el-icon>
</el-upload>
上面好多变量，所以我也将每个的意思和用途在下面罗列出来：
首先这个 v-model，这个 v-model:file-list是上传的一个数组，为了方便对于上传前，上传后等时机对上传的文件进行操作和判断 。
action="https://skumore.oss-xx-xxx.aliyuncs.com"这个是使用elementplus是默认上传的动作。
https://skumore.oss-xx-xxx.aliyuncs.com这个是阿里oss服务器的地址。
list-type="picture-card"这个就是在上传之后会出现上传成功的图片，就是以卡片的形式展示出来，也就是一个视觉呈现，有预览和大图的功能。（放大镜是预览，放大查看）
list-type="text"（默认）：纯文本列表形式，只显示文件名和状态，
无图片预览list-type="picture"：图片列表形式，显示图片缩略图但不是卡片样式，布局更紧凑。
正常的话是在一行排列比如：
list-type="picture-card"和:on-preview="handlePictureCardPreview"这两个一般同时出现
:on-preview这个就是你在预览的时候会出现一个弹窗，将你想要预览的图片传入进去，一般是图片。
:on-remove这个就是将你以上传的图片，一般是图片，删除掉
:on-success这个是上传成功时的函数
:on-error这个是上传失败时的函数
:data是一个用于传递额外表单数据的属性，允许你在上传文件的同时，向服务器发送一些附加的键值对参数（类似表单中的隐藏字段）
如果你在上传的时候需要携带额外信息，比如在上传文件时需要指定文件分类（比如:category:'avatar'表示头像 传递用户身份标识，还有对接阿里OSS时，传递OSS要求的验证参（记着一点这个OSSAccessKeyId是必须要传递的参数，切记切记）
:before-upload这个是在上传之前的函数，用于对上传文件的校验，比如大小类型等等。这个函数有点厉害，它可以获取上传文件的一些信息。
| name | String | 文件名（包含扩展名） | avatar.jpg |
| size | Number | 文件大小（单位：字节） | 204800（表示 200KB） |
| type | String | 文件的 MIME 类型（浏览器自动识别） | image/jpeg（JPG 图片） |
| lastModified | Number | 文件最后修改时间（时间戳，毫秒） | 1620000000000 |
| lastModifiedDate | Date | 文件最后修改时间（Date 对象） | Mon May 03 2021 12:00:00 GMT+0800 |
这个上传的图片地址是自己根据name（是文件的名字上传的时候会读取你上传文件的名字，当然你也可以在上传的时候重新赋予一定的规则进行重新命名）和host拼接之后上传到oss服务器的
