一、vue页面
<template>
<div>
<h1>统计</h1>
<!--原生表单提交-->
<form method="post" action="http://localhost:8082/file/up" enctype="multipart/form-data">
文件 ： <input type="file" name="file">
<br />
文件 ： <input type="file" name="file">
<br />
姓名：<input type="text" name="name" />
<br />
年龄：<input type="number" name="age" />
<input type="submit" value="上传">
</form>
<br />
<br />
<!--element ui表单提交-->
<el-form :model="user" :rules="rules" ref="user" label-width="100px" label-position="right">
<el-form-item label="姓名:" prop="name">
<el-input v-model="user.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="年龄:" prop="age">
<el-input type="number" v-model="user.age"></el-input>
</el-form-item>
<el-form-item>
<el-upload class="upload-demo" action="" list-type="picture-card" ref="upload" :http-request="httpRequest"
multiple :file-list="fileList" :auto-upload="false">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit()">提交</el-button>
<el-button @click="rest()">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '',
age: 0
},
rules: {
name: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
age: [{
required: true,
message: '请输入年龄',
trigger: 'blur'
}]
},
fileList: [],
formDate: new FormData(),
}
},
methods: {
submit() { //提交
//上传类型
let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
//表单校验
this.$refs['user'].validate((valid) => {
if (valid) {
this.formDate.append('name', this.user.name);
this.formDate.append('age', this.user.age);
//获取图片
this.$refs.upload.submit();
//上传
this.axios.post('http://localhost:8082/file/up', this.formDate, config).then((res) => {
console.info('结果', res);
this.formDate = new FormData();
});
} else {
console.log('error submit!!');
return false;
}
});
},
rest() { //重置
this.$refs['user'].resetFields();
},
httpRequest(param) { //this.$refs.upload.submit()执行后会调用，多个图片会调用多次
this.formDate.append('file', param.file);
}
}
}
</script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
二、后端代码
package com.example.demo.controller;
import com.example.demo.pojo.User;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
/**
* @Description: 文件上传
* @Auther: cym
* @Date: 2022/4/16
* @Version: 1.0
*/
@CrossOrigin
@RequestMapping("file")
@RestController
public class FileUpController {
@PostMapping("up")
public void fileUp(@RequestParam(value = "file", required = false) MultipartFile[] files, User user) {
System.out.println(user);
for (MultipartFile file : files) {
File f = new File("C:\\Users\\cym\\Desktop\\图片3.jpeg");
try {
file.transferTo(f);
} catch (IOException e) {
e.printStackTrace();
}
System.out.println("文件名称" + file.getOriginalFilename());
}
}
}
package com.example.demo.pojo;
/**
* @Description: 用户
* @Auther: cym
* @Date: 2022/4/16
* @Version: 1.0
*/
public class User {
private String name;
private Integer age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", age=" + age +
'}';
}
}
三、页面效果
后台打印
