element-ui使用心得

使用上传组件 + axios 上传excel文档

配置不自动上传

         
           点击上传
         

 
 		 提交

添加文件改变事情，当文件改变时将文件封装成数组

fileChange: function (file) {
        this.excelData.file.push(file.raw)
      }

判断上传类型是否为xlsx,封装formData对象,使用axios的create方法组装头部

submitUploadExcel: function (formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return false
          }
          const isExcel = this.excelData.file[0].type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          if (!isExcel) {
            this.$swal({
              type: 'warning',
              title: '警告提示',
              text: '上传文件必须是 xlsx格式'
            })
            return false
          }
          let formData = new FormData()
          formData.append('file', this.excelData.file[0])
          formData.append('executor', window.sessionStorage.getItem('username'))
          var instance = this.$ajax.create({
            headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': 'Bearer ' + window.sessionStorage.getItem('token')
            }
          })
          instance.post('/honekit/connect/import/execl', formData
          ).then(res => {
            this.$swal({
              type: 'success',
              title: '成功提示',
              text: '导入成功'
            })
            this.reload()
          }).catch(err => {
            console.log(err)
            this.$swal({
              type: 'error',
              title: '错误提示',
              text: err.response.data.message
            })
          })
        })
      }