element el-upload上传功能

2023.11.14今天我学习了如何使用el-upload:

 <!--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 :model="formTable" enctype="multipart/form-data" methods="post">
        <el-form-item label="选择文件：">
          <el-upload
            drag
            :limit=limitNum
            name="file"
            ref="upload"
            action=""
            :http-request="dict_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文件，且上传数据尽量不超过1000条</div>
           
          </el-upload>
        </el-form-item>
      </el-form>

如果后端接口是固定并且不需要携带参数就用action，如果是动态的就用http-request。

    // 自定义上传的方法
    dict_upload_request(item) {
      let formData = new FormData()
      formData.append('file', item.file)//上传的文件
      formData.append('status', 0)//携带的参数 参数名+值
      formData.append('name', '张三')//携带的参数 参数名+值

      //如果传入的参数需要数组的话，可以这样写
      let all_column_name = ['11','22','33']
      for (let i = 0; i < all_column_name .length; i++) {
        formData.append('all_check_fields[]', all_column_name[i]); // 在key后面加上 [] 表示这是一个数组
        }     

      dict_upload(formData).then(res => {
        this.$message({
          message: '上传成功！',
          type: 'success'
        })
      })
    },