html怎么使用element ui,element-ui使用心得

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

配置不自动上传

v-model="excelData.file"

ref="upload"

action="/honekit/connect/import/execl"

:limit="1"

:auto-upload="false"

:multiple="false"

:on-change="fileChange"

name="file"

accept=".xlsx"

>

点击上传

提交

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

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

})

})

})

}