一、直接导入
// template
<Tooltip placement="bottom" style="margin-left:10px"> <Upload ref="upload" class="upload_com" :format="format" :action="uploadUrl" :before-upload="handleBeforeUpload" > <Button class="default_handle_btn upload_daoru" icon="i-icon iconfont icondaoru3" ></Button> </Upload> <div slot="content"> <p>导入</p> </div> </Tooltip> // data // 导入相关 uploadUrl: '', format: ['xls', 'xlsx'], file: '' // methods handleBeforeUpload (file) { let flag = false; this.file = ''; if (this.format.length) { const _fileFormat = file.name .split('.') .pop() .toLocaleLowerCase(); const checked = this.format.some( item => item.toLocaleLowerCase() === _fileFormat ); if (!checked) { this.handleFormatError(file); flag = true; } } this.file = file; let formData = new FormData(); formData.append('province', '湖南省'); formData.append('file', this.file); this.$api.Alarm.ImportExcel(formData) .then(res => { this.$Message.success('导入成功!'); this.showListData(); flag = true; }) .catch(err => { this.$Message.error(err.response.data.error.message); flag = true; }); return false; },
二:需用户输入内容,在上传文件
this.$refs.formValidate.validate(valid => {
// 表单验证 if (valid) {
// 是否上传文件 if (this.file) { this.submitLoading = true; let formData = new FormData(); formData.append('dataYear', `${this.innerInfo.dataYear.getFullYear()}-01-01`); formData.append('file', this.file); this.$api[this.modelName].ImportExcel(formData).then(res => { this.$Message.success('请求成功'); this.submitLoading = false; this.$emit('RefreshParent'); this.$emit('ShowListData'); this.$refs.formValidate.resetFields(); this.file = ''; }).catch(err => { this.$Message.error(err.response.data.error.message); this.submitLoading = false; }); } else { this.$Message.error('请选择要上传的文件'); } } else { this.$Message.error('表单验证失败!'); } });