el-upload 组件文件上传

最新推荐文章于 2024-07-19 16:14:20 发布

露露露露啊

最新推荐文章于 2024-07-19 16:14:20 发布

阅读量3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_66430246/article/details/123945434

版权

本文介绍了如何利用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
          }
        }