element-ui文件上传使用


          导入文件

——-----------------------------------------------------------------------------------------

 fileChange(file, fileList) {
      this.beforeUploadFile(file)
      if (this.beforeUploadFile(file)) {
        this.$refs.uploadRef.clearFiles()
        this.fileList.push(file.raw)
        this.uploadFile()
      } else {
        return this.$refs.uploadRef.clearFiles()      //清空上传列表里面的数据
      }
    }

    // 文件超出个数限制时的钩子
exceedFile(files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`)
    }

    // 上传之前进行处理
 beforeUploadFile(file) {
      const isLt5M = file.size / 1024 / 1024 < 10
      if (this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
        this.$message.error({ title: '系统提示', message: `上传文件只能是 ${this.allowTypeTips} 格式!` 
      })
        return false
      }
      if (!isLt5M) {
        this.$message.error({ title: '系统提示', message: '上传文件大小不能超过 10MB!' })
        return false
      } else {
        return true
      }
    }

    // 上传文件
uploadFile() {
      if (this.fileList.length === 0) {
        this.$message.warning('请选择文件')
      } else {
        var file = new FormData()
        file.append('file', this.fileList[0])
        getBudgetUpload(file).then((res) => {
          if (res.code === 0) {
            this.totalPage = res.data.list.length
            this.tableData = res.data.list
            this.$message.success({ title: '系统提示', message: '上传成功' })
            this.fileList = []
          } else {
            this.$message.error({ title: '系统提示', message: '上传失败' })
          }
        })
      }
    },

你可能感兴趣的:(element-ui文件上传使用)