elementui手动上传文件、upload手动上传文件，限制上传的文件格式、限制上传的文件大小

1、前端效果

 2、前端代码

 <el-upload
  class="upload-demo"
    ref="upload"
    action="https://jsonplaceholder.typicode.com/posts/"
    :file-list="fileobj"
    :http-request="httpRequest"
    :auto-upload="false">
    <div class="el-icon-upload" style="height: 50px"></div>
     <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>

<el-button style="margin-left: 10px;" type="success" @click="submitUpload">提交</el-button>


data () {
    fileobj: [],//显示上传的文件

}

函数相关

 methods: {
    submitUpload () {
        this.$refs.upload.submit()
    }，
    
     httpRequest (params) {
        var FileExt = params.file.name.split('.')[1]
        var file_type = ['pdf', 'doc', 'docx'].indexOf(FileExt) === -1
        //拿到上传的文件的格式，限制上传的文件格式
        if (file_type) {
          this.$message({
            type: 'warning',
            message: '请上传后缀名为、pdf、doc、docx.'
          })
          this.fileobj = []
          return
        }
        const isLt2M = params.file.size / 1024 / 1024 < 100
        //限制上传的文件大小
        if (!isLt2M) {
          this.$message.warning('上传的文件大小不能超过100MB')
          return
        }

        console.log(params.file)//拿到上传的文件
        var formdata = new FormData()
        formdata.append('filename', params.file)
        formdata.append('name', this.ruleForm.filename)
        formdata.append('desc', this.ruleForm.desc)
        this.$axios({
          url: this.$settings.base_url + '/user/companyfile/',
          method: 'post',
          data: formdata
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('文件上传成功')
            this.get_data()
            this.resetForm('ruleForm')
            this.fileobj=[]
          } else {
            this.$message.error('文件上传失败')
          }
        })
      },

}

3、:auto-upload="false"   设置成false后，就不会自动上传文件了，只有我们就可以手动上传文件。在手动上传的期间，拿到文件，实现axios请求。

4、流程图：