当前位置: 首页 > Web前端 > vue.js

element-uiel-upload手动上传一个excel文件到服务器

时间:2023-04-01 01:41:18 vue.js

具体需求场景如下:选择要上传的excel文件后,需要手动上传文件到后台服务器,统计结果会显示导入成功和失败。官网也有手动上传的例子,使用action="url"传入地址,但在实际项目中需要自己配置请求。下面详细描述实现方法。说明:从上传文件到显示统计结果,我们的后台提供了两个接口:首先调用文件上传接口,上传成功后根据后台返回的标记调用统计结果接口,然后显示返回的response结果。1.属性设置。Vue文件选择文件一次只上传一个xls/xlsx文件,且不超过10M

取消上传下载反馈results2.处理逻辑逻辑处理代码如下:methods:{//上传文件前钩子:判断上传文件的格式和大小,如果返回false则停止上传beforeUpload(file){//文件类型constisType=file.type==='application/vnd.ms-excel'constisTypeComputer=file.type==='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'constfileType=isType||isTypeComputerif(!fileType){this.$message.error('上传的文件只能是xls/xlsx格式!')}//文件大小限制为10MconstfileLimit=file.size/1024/1024<10;if(!fileLimit){this.$message.error('上传文件大小不超过10M!')}returnfileType&&fileLimit},//自定义上传方式,param为默认参数,可以获取文件文件信息,具体信息如图uploadHttpRequest(param){constformData=newFormData()//FormData对象,添加参数只能通过append形式添加('key',value)formData.append('file',param.file)//添加文件对象formData.append('uploadType',this.rulesType)consturl=`${this.myBaseURL}/operation/ruleImport/importData`//上传地址axios.post(url,formData).then(res=>{const{data:{code,mark}}=resif(code===0){param.onSuccess()//成功上传的文件显示绿色勾号this.uploadMark=mark}returnthis.countData(this.uploadMark)//根据mark值调用统计结果接口,返回链式调用的promise}).then(res=>{//链式调用,调用统计结果响应const{data:{code,data}}=resif(code===0){console.log('统计结果',data)}}).catch(err=>{console.log('失败',err)param.onError()//上传失败的文件将从文件列表中删除})},//统计结果countFile(mark){returnnewPromise((resolve,reject)=>{axios.get(`/operation/ruleImport/countData?mark=${mark}`).then(res=>{resolve(res)}).catch(error=>{reject(error)})})},//点击上传:手动上传到服务器,会触发组件的http请求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.$参考。upload.clearFiles()//清除上传的文件对象this.fileList=[]//清除选择的文件列表this.$emit('close',false)}}http-request的param参数,打印结果可以是如图通过param.file获取当前文件对象。好了,以上是我手动上传文件的一个实现,但是还有一些细节需要改进,比如:上传时按钮显示加载状态;文件上传成功后,显示列表不允许点击X删除等,大家可以根据自己的需要进行调整,谢谢:)~~