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

Vuejs method to implement uploading files: 1. Create vue page code; 2. Implement size verification before uploading through the "beforeUpload(file){...}" method; 3. Implement the correlation of uploaded files Just logic.

How to upload files in vuejs

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

How to upload files in vuejs?

vue implements the file upload function

vue file upload, for your reference, the specific content is as follows

First of all, let’s talk about what you want to achieve The effect

As you can see in the screenshot, the company and the files that need to be uploaded need to be submitted to the background for processing, then let’s talk about how to achieve it

vue implementation

vue page code

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

Copy after login

Size verification before upload

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

Backend

/** * 上传文件 */ @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

Recommended: "The latest 5 vue.js video tutorial selections"

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