element实现文件上传

点击按钮打开文件上传窗口

  <el-button
              type="primary"
              class="search_btn"
              @click="tolead.IsShow = true"
              >导入表格</el-button
            >

具体样式根据产品UE设计稿来

下面是选择文件的html代码

  <el-form label-width="80px" class="demo-ruleForm">
            <div>请上传Excel文件</div>
            <el-form-item>
              <el-upload
                ref="upload"
                class="upload-demo"
                action="124"
                style="float: left; margin: 20px 0 0 -80px"
                :http-request="upExcel"
                multiple
                accept=".csv"
                :on-exceed="exceed"
                :limit="1"
              >
                <el-button class="right" type="primary" plain
                  >选择文件</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="big" @click="upToleadPoint"
                >确定</el-button
              >
              <el-button class="big" @click="tolead.IsShow = false"
                >取消</el-button
              >
            </el-form-item>
          </el-form>

我这边是限制单条上传

 /* 导入表格 */
    upExcel(file) {
      var formFile = new FormData();
      formFile.append("file", file.file);
      this.tolead.subData.file = formFile;
      this.$message({
        message: "上传成功",
        type: "success",
      });
    },
    exceed() {
      this.$message({
        message: "最多上传一个，如需更换先移除",
        type: "warning",
      });
    },
    /* 确定导入产品按钮 */
    upToleadPoint() {
      if (this.tolead.subData.file == "") {
        this.$message({
          message: "请选择文件",
          type: "warning",
        });
      } else {
        upLoadFile(point.upToLead, this.tolead.subData.file).then((res) => {
          this.$message({
            message: res.message.default,
            type: res.status,
            center: true,
          });
          this.tolead.IsShow = false;
        });
      }
    },

主要是代码，用到的变量自己定义好就行，具体方法及参数拓展可上饿了么官网查看