具体需要场景如下:
抉择须要上传的 excel 文件后,要把文件手动上传到后盾服务器,并将导入成功失败的统计结果显示进去。官网也有手动上传的示例,通过 action="url"
传入地址的形式,但在理论我的项目中申请须要本人配置,上面具体阐明实现的办法。
阐明:
- 在上传文件到展现统计后果,咱们后端给了两个接口:首先调用文件上传接口,上传胜利后,依据后端返回的 mark 再调用统计后果接口,而后展现返回的响应后果。
1、属性设置
.vue 文件
<el-row>
<div class="el-form-item__content">
<el-upload ref="upload"
accept=".xls,.xlsx"
action="#"
:auto-upload="false"
:multiple="false"
:file-list="fileList"
:before-upload="beforeUpload"
:http-request="uploadHttpRequest"
:on-remove="fileRemove"
:on-change="fileChange">
<el-button size="small" type="primary"> 抉择文件 </el-button>
<div slot="tip" class="el-upload__tip"> 一次只能上传一个 xls/xlsx 文件,且不超过 10M</div>
</el-upload>
</div>
</el-row>
<el-row>
<el-button size="small" @click="closeDialog"> 取 消 </el-button>
<el-button type="primary" size="small" @click="submitUpload"> 上 传 </el-button>
<el-button type="primary" size="small" @click="downloadRes"> 下载反馈后果 </el-button>
</el-row>
2、解决逻辑
逻辑解决代码如下:
methods: {
// 上传文件之前的钩子:判断上传文件格式、大小等,若返回 false 则进行上传
beforeUpload(file) {
// 文件类型
const isType = file.type === 'application/vnd.ms-excel'
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
const fileType = isType || isTypeComputer
if(!fileType) {this.$message.error('上传文件只能是 xls/xlsx 格局!')
}
// 文件大小限度为 10M
const fileLimit = file.size / 1024 / 1024 < 10;
if(!fileLimit) {this.$message.error('上传文件大小不超过 10M!')
}
return fileType && fileLimit
},
// 自定义上传办法,param 是默认参数,能够获得 file 文件信息,具体信息如下图
uploadHttpRequest(param) {const formData = new FormData() //FormData 对象,增加参数只能通过 append('key', value) 的模式增加
formData.append('file', param.file) // 增加文件对象
formData.append('uploadType', this.rulesType)
const url = `${this.myBaseURL}/operation/ruleImport/importData` // 上传地址
axios.post(url, formData)
.then( res => {const { data: { code, mark} } = res
if(code === 0) {param.onSuccess() // 上传胜利的文件显示绿色的对勾
this.uploadMark = mark
}
return this.countData(this.uploadMark) // 依据 mark 值调用统计后果接口,返回一个 promise 以便进行链式调用
})
.then( res => { // 链式调用,调用统计后果的响应
const {data: { code, data} } = res
if(code === 0) {console.log('统计后果', data)
}
})
.catch( err => {console.log('失败', err)
param.onError() // 上传失败的文件会从文件列表中删除})
},
// 统计后果
countFile(mark) {return new Promise((resolve, reject) => {
axios
.get(`/operation/ruleImport/countData?mark=${mark}`)
.then(res => {resolve(res)
})
.catch(error => {reject(error)
})
})
},
// 点击上传:手动上传到服务器,此时会触发组件的 http-request
submitUpload() {this.$refs.upload.submit()
},
// 文件产生扭转
fileChange(file, fileList) {if (fileList.length > 0) {this.fileList = [fileList[fileList.length - 1]] // 展现最初一次抉择的文件
}
},
// 移除抉择的文件
fileRemove(file, fileList) {if(fileList.length < 1) {this.uploadDisabled = true // 未抉择文件则禁用上传按钮}
},
// 勾销
closeDialog() {this.$refs.upload.clearFiles() // 革除上传文件对象
this.fileList = [] // 清空抉择的文件列表
this.$emit('close', false)
}
}
http-request 的 param 参数,打印后果如图。可通过 param.file 获取以后文件对象。
好了,以上就是我手动上传文件的一个实现,但还有一些细节要欠缺,比方:上传时按钮显示加载状态;上传文件胜利后展现列表不容许点击 X 删除等等,大家可依据本人的需要进行调整,谢 :)~~