vuejs如何实现上传文件
这篇文章将为大家详细讲解有关vuejs如何实现上传文件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都网站建设、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的方正网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
vuejs实现上传文件的方法:1、创建vue页面代码;2、通过“beforeUpload(file){...}”方法实现上传之前的大小校验;3、实现上传文件的相关逻辑即可。
本文操作环境:Windows7系统、vue2.9.6版,DELL G3电脑。
vuejs怎么实现上传文件?
vue实现文件上传功能
vue 文件上传,供大家参考,具体内容如下
首先 先说一下想要实现的效果
就如截图所见,需要将企业和需要上传的文件提交到后台处理,那么接下来就说如何实现
vue 实现
vue 页面代码
选取文件 下载模板 只能上传excel文件,且不超过5MB{{fileName}}取消 确定
上传之前的大小校验
beforeUpload(file){ debugger console.log(file,'文件'); 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不会自动上传 },
手动上传确认提交
submitUpload() { debugger console.log('上传'+this.files.name) if(this.fileName == ""){ this.$message.warning('请选择要上传的文件!') return false } let fileFormData = new FormData(); fileFormData.append('file', this.files, this.fileName);//filename是键,file是值,就是要传的文件,test.zip是要传的文件名 let requestConfig = { headers: { 'Content-Type': 'multipart/form-data' }, } this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => { 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(); }
关于vuejs如何实现上传文件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享文章:vuejs如何实现上传文件
网页URL:http://scyanting.com/article/jdedjj.html