需求:1.表单输入信息

2.上传Excel附件

3.下载附件模板

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

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

  • 效果图:

  1. 样式部分

 下载模板将文件拖到此处,或点击上传提交
  1. data部分代码

 data () {return {peopleform: {name: '',phone: '',address: '',},fileList: []}},
  1. method中的代码

 methods: {// 覆盖默认的上传行为httpRequest (raw) {this.fileList.push(raw)},// 上传前beforeUpload (file) {let fileSize = file.sizeconst FIVE_M = 2 * 1024 * 1024//不允许上传大于2Mif (fileSize > FIVE_M) {this.$message.error("最大上传2M")return false}//判断文件类型,必须是xlsx格式let fileName = file.namelet 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()}}