vuejs實(shí)現(xiàn)上傳文件的方法：1、創(chuàng)建vue頁(yè)面代碼；2、通過“beforeUpload(file){…}”方法實(shí)現(xiàn)上傳之前的大小校驗(yàn)；3、實(shí)現(xiàn)上傳文件的相關(guān)邏輯即可。

本文操作環(huán)境：Windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么實(shí)現(xiàn)上傳文件？

vue實(shí)現(xiàn)文件上傳功能

vue 文件上傳，供大家參考，具體內(nèi)容如下

首先 先說一下想要實(shí)現(xiàn)的效果

就如截圖所見，需要將企業(yè)和需要上傳的文件提交到后臺(tái)處理，那么接下來就說如何實(shí)現(xiàn)

vue 實(shí)現(xiàn)

vue 頁(yè)面代碼

<el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload"> <el-button slot="trigger" size="small" type="primary">選取文件</el-button> <a href="./static/moban.xlsx" rel="external nofollow" download="模板"><el-button size="small" type="success">下載模板</el-button></a> <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button> --> <div slot="tip" class="el-upload__tip">只能上傳excel文件，且不超過5MB</div> <div slot="tip" class="el-upload-list__item-name">{{fileName}}</div> </el-upload>  <span slot="footer" class="dialog-footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="submitUpload()">確定</el-button> </span>

上傳之前的大小校驗(yàn)

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不會(huì)自動(dòng)上傳  },

手動(dòng)上傳確認(rèn)提交

submitUpload() {  debugger  console.log('上傳'+this.files.name)  if(this.fileName == ""){   this.$message.warning('請(qǐng)選擇要上傳的文件！')   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)   }  })   }

后臺(tái)

/**  * 上傳文件  */  @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("上傳文件不能為空");  }  //上傳文件 相關(guān)邏輯    return R.ok(); }

推薦：《最新的5個(gè)vue.js視頻教程精選》