el-upload 组件上传文件(查询,上传,删除,下载功能)

原创

已于 2024-06-27 13:40:02 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-06-22 10:41:50 首次发布

1.html

el-upload中的属性：

<el-upload
ref="upload"
class="upload-demo" // element-ui自带的样式
:headers="headerOdj" // 文件上传的头,带token（重要，不然传输大文件会断掉）
:action="adminUrl" // 上传的服务器地址
:before-upload="beforeFileUpload" // 文件上传前（判断文件类型，大小）
:on-success="successFileUpload" // 文件上传成功（上传接口写这，回显的数据处理）
:on-remove="handleRemove" // 文件移除时候（删除文件接口写这）
:on-preview="handleFile" // 点击文件时候（文件点击下载）
:file-list="fileList" // 页面文件回显的list
drag // 支持拖拽上传
>

    <!-- pc文件上传对话框 -->
    <el-dialog
      title="文件上传"
      :visible.sync="pcUpload"
      width="400px"
      append-to-body
      :before-close="pcUploadClose"
    >
      <el-upload
        ref="upload" 
        class="upload-demo"