上传OSS服务器图片文件视频(使用elemenplus上传组件)
我在这里使用的是elementplus的


使用elementplus上传到阿里的OSS上,就是直接从本地对接阿里的OSS服务器,不会消耗公司服务器的带宽,下面是相关代码:
上面好多变量,所以我也将每个的意思和用途在下面罗列出来:
首先这个 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服务器的










