el-upload的使用

最新推荐文章于 2024-07-07 21:34:28 发布

熙冰

最新推荐文章于 2024-07-07 21:34:28 发布

阅读量688

点赞数

分类专栏： UI组件库文章标签： Element el-upload Vue

本文链接：https://blog.csdn.net/melodystars/article/details/103962540

版权

本文详细介绍了在Vue项目中使用Element UI库的el-upload组件进行文件上传的步骤和技巧，包括上传前的预览、限制上传类型、进度条显示、文件上传成功后的回调处理等核心功能，并探讨了如何自定义上传样式和错误处理策略。

摘要由CSDN通过智能技术生成

<template>
  <div class="download">
    <!--
    action：必选参数，上传的地址
    accept：接受上传的文件类型
    drag：是否启用拖拽上传
    disabled：是否禁用
    file-list：上传的文件列表
    multiple：是否支持多选文件
    list-type：文件列表的类型
    limit：最大允许上传个数
    show-file-list：是否显示已上传文件列表
    -->
    <el-upload
      class="upload-demo"
      drag
      multiple
      :limit="1"
      :accept="'.jpg,.png'"
      :file-list="fileList"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
      :on-change="handleChange"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :on-remove="handleRemove">
      <i class=&