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

How to upload files in vuejs

藏色散人

Release： 2023-01-13 00:45:41

Original

5398 people have browsed it

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

<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">上传到服务器</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>

Copy after login

Size verification before upload

beforeUpload(file){
 debugger
 console.log(file,&#39;文件&#39;);
 this.files = file;
 const extension = file.name.split(&#39;.&#39;)[1] === &#39;xls&#39;
 const extension2 = file.name.split(&#39;.&#39;)[1] === &#39;xlsx&#39;
 const isLt2M = file.size / 1024 / 1024 < 5
 if (!extension && !extension2) {
  this.$message.warning(&#39;上传模板只能是 xls、xlsx格式!&#39;)
  return
 }
 if (!isLt2M) {
  this.$message.warning(&#39;上传模板大小不能超过 5MB!&#39;)
  return
 }
 this.fileName = file.name;
 return false // 返回false不会自动上传
 },

Copy after login

Manual upload confirmation submission

submitUpload() {
 debugger
 console.log(&#39;上传&#39;+this.files.name)
 if(this.fileName == ""){
  this.$message.warning(&#39;请选择要上传的文件！&#39;)
  return false
 }
 let fileFormData = new FormData();
 fileFormData.append(&#39;file&#39;, this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
 let requestConfig = {
  headers: {
  &#39;Content-Type&#39;: &#39;multipart/form-data&#39;
  },
 }
 this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
  debugger
  if (data && data.code === 0) {
  this.$message({
  message: &#39;操作成功&#39;,
  type: &#39;success&#39;,
  duration: 1500,
  onClose: () => {
  this.visible = false
  this.$emit(&#39;refreshDataList&#39;)
  }
  })
  } 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!