Vue+elementUI中的el-upload实现上传文件给后端，限制上传文件的格式、文件的大小、文件的数量，将表单和Excel文件一起提交给后端

需求：1.表单输入信息

2.上传Excel附件

3.下载附件模板

4.限制上传文件的格式、文件的大小、文件的数量

5.将表单和Excel文件一起提交给后端

效果图：

Vue+elementUI中的el-upload实现上传文件给后端，限制上传文件的格式、文件的大小、文件的数量，将表单和Excel文件一起提交给后端

样式部分

data部分代码

 data () {
    return {
      peopleform: {
        name: '',
        phone: '',
        address: '',
      },
      fileList: []
    }
  },

method中的代码

 methods: {
    // 覆盖默认的上传行为
    httpRequest (raw) {
      this.fileList.push(raw)
    },
    // 上传前
    beforeUpload (file) {
      let fileSize = file.size
      const FIVE_M = 2 * 1024 * 1024
      //不允许上传大于2M
      if (fileSize > FIVE_M) {
        this.$message.error("最大上传2M")
        return false
      }
      //判断文件类型，必须是xlsx格式
      let fileName = file.name
      let reg = /^.+(\.xlsx)$/
      if (!reg.test(fileName)) {
        this.$message.error("只能上传xlsx!")
        return false
      }
      return true
    },
    // 文件数量提醒
    handleExceed () {
      this.$message({ type: 'error', message: '最多支持1个附件上传' })
    },
    //提交
    async submit () {
      const params = new FormData()
      this.fileList.forEach((x) => {
        params.append('file', x.file)
      })
      params.append('name', this.peopleform.name)
      params.append('phone', this.peopleform.phone)
      params.append('address', this.peopleform.address)
      const res = await this.axios.post("这里填路径", params)
      if (res) {
        this.$message.success("上传成功！")
      }

    },
    //设置下载文件
    downloads () {
      let a = document.createElement("a")
      a.href = "/data/datas/main_ventilator_excel.xlsx"
      a.download = "main_ventilator_excel.xlsx" //设置下载文件文件名，这里加上.xlsx指定文件类型
      a.style.display = "none"
      document.body.appendChild(a)
      a.click()
      a.remove()
    }

  }

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/0917cae519.html