How to upload files in vue.js-Vue.js-php.cn

Vue.js method of uploading files: You can use the FormData object to implement file upload. The FormData object can assemble a set of key/value pairs for sending requests using XMLHttpRequest. It can send form data flexibly and conveniently.

How to upload files in vue.js

This method is suitable for all brands of computers

vue.js upload File method:

First let’s talk about the effect you want to achieve

How to upload files in vue.js

As you can see in the screenshot, you need to enter the company and the file you want to upload. The file is submitted to the background for processing, then let’s talk about how to implement

vue to implement

vue page code

 选取文件 下载模板  只能上传excel文件，且不超过5MB
 {{fileName}}
   取消 确定

Copy after login

Size verification before uploading

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不会自动上传 },

Copy after login

Manual upload confirmation submission

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) } }) }

Copy after login

Backstage

/** * 上传文件 */ @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(); }

Copy after login

Related free learning recommendations:javascript(Video)

The above is the detailed content of How to upload files in vue.js. For more information, please follow other related articles on the PHP Chinese website!