element UI-上传文件（el-upload）

1.由于原生js实现的上传功能有些缺陷，暂时没有能力解决，所以尝试使用el-upload，直接上代码

利用el-upload的disabled属性，可以控制上传文件的弹框是否打开，实现上传文件前校验功能

<el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"（不用管）
      accept=".xls,.xlsx"（文件格式，逗号分隔）
      :show-file-list="false"
      :disabled="uploadProp"
      :before-upload="beforeAvatarUpload">
      <el-button size="small" type="primary" @click="goUpload">点击上传</el-button>
</el-upload>

beforeAvatarUpload (file) {
      console.log('beforeAvatarUpload')
      // 校验
      if (this.radioDate.length === 0) {
        this.$alert('请先选择数据')
        return false
      }
      console.log(file)
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$alert('大小不得超过50M')
        return false
      }
      let Base64 = require('js-base64').Base64
      let fileName = file.name
      console.log('fileName:::', fileName)
      fileName = Base64.encode(fileName)
      console.log('encode:::', fileName)
      let formData = new FormData()
      console.log('formData1', formData)
      formData.append(fileName, file)
      console.log('formData2', formData)
      this.$axios({
        url: '/upload/file',
        method: 'post',
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        },
        data: formData
      }).then((res) => {
        console.log(res.data)
        if (res.data.tradeMap.resultCode === '0000') {
          this.fileNames = res.data.tradeMap.fileNames
          console.log('文件上传返回的filenames是：', this.fileNames)
          this.sendFileNames()
        } else {
          let message = res.data.tradeMap.message
          this.$alert(message)
        }
      }).catch((error) => {
        console.log(error)
      })
      return isLt50M
    }

// 上传前校验
    goUpload () {
      console.log('测试用啦啦啦啦啦啦啦啦')
      console.log('this.uploadProp;;;', this.uploadProp)
      // 此处控制上传文件的弹框是否弹出
      if (this.radioEdor !== this.oldRadioEdor) {
        this.$confirm('部分保全信息已更改，请重新打印通知书', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
        this.uploadProp = true
      } else {
        this.uploadProp = false
      }
      console.log('this.uploadProp;;;', this.uploadProp)
    },

 

2.el-upload提供了很多的Attribute，可以实现多文件上传、数量限制、上传控制等

element官网