el-upload 组件文件上传

时间：2025-01-19 10:34:29

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监听上传进度

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

相关文章