vue实现文件上传功能

前端之家收集整理的这篇文章主要介绍了vue实现文件上传功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue 文件上传,供大家参考,具体内容如下

首先 先说一下想要实现的效果

就如截图所见,需要将企业和需要上传文件提交到后台处理,那么接下来就说如何实现

vue 实现

vue 页面代码

文件
上传excel文件,且不超过5MB

上传之前的大小校验

文件'); this.files = file; const extension = file.name.split('.')[1] === 'xls' const extension2 = file.name.split('.')[1] === 'xlsx' const isLt2M = file.size / 1024 / 1024 < 5 if (!extension && !extension2) { this.$message.warning('上传模板只能是 xls、xlsx格式!') return } if (!isLt2M) { this.$message.warning('上传模板大小不能超过 5MB!') return } this.fileName = file.name; return false // 返回false不会自动上传 },

手动上传确认提交

{ debugger if (data && data.code === 0) { this.$message({ message: '操作成功',type: 'success',duration: 1500,onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) }

后台

上传文件 */ @PostMapping("/upload") @RequiresPermissions("basedata:oesmembers:upload") public R upload(@RequestParam("file") MultipartFile file,@RequestParam("companyId") Integer companyId) { System.out.println(companyId); if (file.isEmpty()) { throw new RRException("上传文件不能为空"); } //上传文件 相关逻辑

return R.ok();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31049.html

猜你在找的Vue相关文章