How to upload Files with vuejs
This article will explain in detail how to upload files on vuejs. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.
Vuejs to achieve the method of uploading files: 1, create vue page code; 2, through the "beforeUpload (file) {...}" method to achieve the size check before uploading; 3, to achieve the relevant logic of uploading files.
This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.
How does vuejs upload files?
Vue realizes the function of file upload
Upload vue file for your reference. The details are as follows
First of all, let's talk about the effect we want to achieve.
As you can see from the screenshot, the enterprise and the files that need to be uploaded need to be submitted to the background for processing, so let's talk about how to implement
Vue implementation
Vue page code
Select a file download template to upload only excel files, and cancel the confirmation no more than 5MB {{fileName}}.
Size check before upload
BeforeUpload (file) {debugger console.log (file,' 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: 'successful operation', type: 'success', duration: 1500, onClose: () = > {this.visible = false this.$emit (' refreshDataList')}})} else {this.$message.error (data.msg)}
Backstage
/ * upload file * / @ 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 ("upload file cannot be empty");} / upload file related logic return R.ok ();}
On how to upload files on vuejs to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
