Element-Ui中的upload实现拖拽上传掉接口

因为项目需要，需要上传识别发票，掉接口完成，将图片上传服务器，查阅文档最终实现功能，要实现的效果图如下：

html：

<div class="darkBoxs" v-if="flag1">
<div class="main">
<div class="top1">
  <span>上传发票照片span>
  <i class="el-icon-close right" @click="$router.go(-1)">i>
div>
<div class="xuxian">
  <el-upload
    class="upload-demo"
    drag
    ref="upload"
    action="123"
    :before-upload="beforeUpload"
    multiple
    name="file"
    :data="paramsData"
    :headers="myHeaders"
  >
    <i class="el-icon-upload">i>
    <div class="el-upload__text">
      将文件拖到此处，或<em>点击上传em>
    div>
    <div class="el-upload__tip" slot="tip">
      只能上传jpg/png文件，且不超过500kb
    div>
  el-upload>
  <div class="usehead">
    无法识别？试试
    <span @click="usehead">手动输入span>
  div>
div>
div>
div>

这里使用了上传文件的钩子函数，仔细看文档就好：

js：

 computed: {
    paramsData: function() {
      let params = {
        type: 2,
      };
      return params;
    },
  },

    //文件上传调用的方法
    beforeUpload(file) {
      this.flag1 = false;
      this.jiaoyan = 1;
      if (this.jiaoyan == 1) {
        this.flag3 = true;
      }
      let fd = new FormData();
      fd.append("file", file);
      fd.append("type", 2);
      // 上传文件掉后台接口
      this.$posts("/service/upload", fd).then(
        (res) => {
          if (res.success== "true") {
            this.id = res.id;
            // 校验中弹框
            this.jiaoyan = 2;
            if (this.jiaoyan == 2) {
              this.flag3 = true;
              var that = this;
              setTimeout(function() {
                that.flag3 = false;
              }, 2000);
            }
        },
        (err) => {
          this.jiaoyan = 3;
          if (this.jiaoyan == 3) {
            this.flag3 = true;
            this.errormsg = '扫描失败请重试!'
          }
        }
      );
      return false; // 返回false不会自动上传
    },

css：

 // 上传发票照片弹窗
  .darkBoxs {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    .main,.mains {
      width: 890px;
      height: 430px;
      background: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 101;
      padding: 10px;
      border-radius: 2px;
      .top1 {
        margin-bottom: 10px;
        span {
          font-size: 14px;
          font-weight: bolder;
        }
        i {
          font-size: 18px;
          cursor: pointer;
          color: #bfbfbf;
        }
        .right {
          float: right;
          margin-left: 10px;
        }
      }
      .bidding {
        padding: 10px 0;
        text-align: center;
        span {
          font-size: 16px;
          margin: 0 10px;
        }
        .blue {
          color: #409eff;
        }
        .grey {
          color: #888;
        }
        i {
          font-size: 16px;
        }
      }
      .bottom {
        overflow: hidden;
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        .sure {
          background: #3f51b5;
          color: white;
        }
        .sure1 {
          width: 115px;
        }
      }
    }
    .xuxian {
      width: 720px;
      height: 267px;
      border: 1px dashed #ccc;
      margin: 35px auto;
    }
    .usehead {
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
      span {
        color: blue;
        cursor: pointer;
      }
    }
    // 手动输入四要素修改样式
    .main1 {
      width: 520px;
      height: 350px;
      background: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 101;
      padding: 10px;
      border-radius: 2px;
    }
    // 校验中样式
    .main3 {
      width: 420px;
      height: 250px;
      background: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 101;
      padding: 10px;
      border-radius: 2px;
    }
    .mains{
      width: 1000px;
    }
  }