element el-upload上传文件的使用

2023.2.2今天我学习了如何使用el-upload组件进行上传文件。

效果：

传统方法：

直接看官方文档，但是官方文档的接口是静态的。

Element - The world's most popular Vue UI framework

特殊方法：

走动态的后端接口。

 js代码如下：

精简版：

  
 action=""
   :http-request="upload_request"

完整版：

  <!--drag设置可拖动-->
      <!--accept=".xlsx"设置上传的文件类型-->
      <!--:limit=1上传文件的最大个数-->
      <!--:auto-upload="false"是否在选取后直接上传-->
      <!--:before-upload="beforeUploadFile"上传文件之前的钩子-->
      <!--:on-change="fileChange"文件状态改变时的钩子-->
      <!--:on-remove="fileRemove"文件列表移除文件时的钩子-->
      <!--:on-exceed="exceedFile"文件超出个数限制-->
      <!--:on-success="upload_success"文件上传成功的钩子-->
<el-form-item label="选择文件：">
          <el-upload
            drag
            :limit=limitNum
            name="file"
            ref="upload"
            action=""
            :http-request="upload_request"
            accept=".xlsx"
            :headers="headers"
            :with-credentials="true"
            :file-list="fileList"
            :before-upload="beforeUploadFile"
            :before-remove="beforeRemove"
            :on-exceed="exceedFile"
            :on-remove="fileRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传xlsx文件，且上传数据尽量不超过10000条</div>
          </el-upload>
        </el-form-item>