html：

      <div>

          <el-card class="box-card">

            <el-upload

              ref="upload"

              accept=".xls,.xlsx"

              action="#"

              :auto-upload="false"

              :multiple="false"

              :file-list="fileList"

              :before-upload="beforeUpload"

              :http-request="uploadHttpRequest"

              :on-remove="fileRemove"

              :on-change="fileChange"

            >

              <img class="upImg" src="../../style/img/up.png" alt="" />

              <el-button class="buttonUp" type="primary">上传excel</el-button>

              <div class="el-upload__text">或者拖放一个文件</div>

            </el-upload>

          </el-card>

          <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

        </div>

        <div><el-button style="width: 450px; margin: 20px auto; padding: 15px" type="primary" @click="submitUpload">确认上传</el-button></div>

js：

 methods: {

    beforeUpload(file) {

      //文件类型

      const isType = file.type === 'application/vnd.ms-excel'

      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

      const fileType = isType || isTypeComputer

      if (!fileType) {

        this.$message.error('上传文件只能是xls/xlsx格式！')

      }

      // 文件大小限制为10M

      const fileLimit = file.size / 1024 / 1024 < 10

      if (!fileLimit) {

        this.$message.error('上传文件大小不超过10M！')

      }

      return fileType && fileLimit

    },

    // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图

    uploadHttpRequest(param) {

      const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加

      formData.append('file', param.file) //添加文件对象

      formData.append('uploadType', this.is_type)//接口要传的参数

      // 调用接口api

      importData(formData).then((data) => {

        if (data.code == 200) {

          this.msgSuccess('成功')

          param.onSuccess() // 上传成功的文件显示绿色的对勾

          this.fileList = []

          this.is_type = ''

        } else {

          this.msgError(data.msg)

        }

      })

    },

    // 点击上传：手动上传到服务器，此时会触发组件的http-request

    submitUpload() {

      this.$refs.upload.submit()

    },

    // 文件发生改变

    fileChange(file, fileList) {

      if (fileList.length > 0) {

        this.fileList = [fileList[fileList.length - 1]] // 展示最后一次选择的文件

      }

    },

    // 移除选择的文件

    fileRemove(file, fileList) {

      if (fileList.length < 1) {

        this.uploadDisabled = true //未选择文件则禁用上传按钮

      }

    },

    // 取消

    closeDialog() {

      this.$refs.upload.clearFiles() //清除上传文件对象

      this.fileList = [] //清空选择的文件列表

      this.$emit('close', false)

    },

  },

图片

页面：

 

html：

 

js：