el-upload 组件文件上传

本文介绍了如何利用Element UI的el-upload组件进行文件上传操作,包括设置列表类型、上传地址、请求头、回调函数等关键属性。同时展示了如何自定义上传逻辑、监听上传进度,并通过腾讯云SDK实现上传进度条的显示。el-upload组件支持多种事件如on-success、on-remove、on-preview等,方便进行各种交互处理。
摘要由CSDN通过智能技术生成

el-upload 组件


该组件可以实现文件的上传, 组件内部会自己使用原生的xhr发送请求

<el-upload 
   list-type="picture-card"
   :file-list="fileList"
   :on-remove="onRemove"
   :on-preview="onPreview"
   :on-change="onChange"
   :before-upload="beforeUpload"
   :http-request="httpRequest"
   action="#"
   :class="{hidden:fileComputed}"
></el-upload>


list-type 为列表的类型, 可选值为  text / picture / picture-card

action 为上传的地址

name 为上传的文件字段名

headers 为请求头信息

on-success 上传成功的钩子函数, 可以获取到服务器返回的数据

on-remove 移除的钩子函数

on-preview 预览的钩子函数

on-change 文件发生改变时触发 => 添加文件 / 上传成功 / 上传失败

before-upload 上传前的钩子函数

auto-upload 自动上传功能, 默认为 true

http-request 覆盖默认的上传行为, 可自己写上传的逻辑功能

file-list 默认展示的图片内容, 一般用于回显功能 , file-list 的数据不是双向绑定的

上传的进度条显示

放置进度条

 <el-progress v-if="showPercent" style="width: 180px" :percentage="percent" />

data定义变量

percent: 0,
showPercent: false // 默认不显示进度条

通过腾讯云sdk监听上传进度

 cos.putObject({
          // 配置
          Bucket: 'laogao-1302806742', // 存储桶名称
          Region: 'ap-guangzhou', // 存储桶地域
          Key: params.file.name, // 文件名作为key
          StorageClass: 'STANDARD', // 此类写死
          Body: params.file, // 将本地的文件赋值给腾讯云配置
          // 进度条
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值