在端，可以使用
Element UI 的 Upload 组件来
上传文件，同时将表单数据也一并提交到后端。具体代码如下：
```html
<template>
<el-form :model="form" label-width="120px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
avatar: ''
},
imageUrl: ''
}
},
methods: {
handleAvatarSuccess(res, file) {
this.form.avatar = res.url
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload(file) {
// 限制
上传图片的大小和格式
const isJPG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isPNG) {
this.$message.error('
上传头像图片只能是 JPG/PNG 格式!')
return false
}
if (!isLt2M) {
this.$message.error('
上传头像图片大小不能超过 2MB!')
return false
}
return true
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
const formData = new FormData()
formData.append('name', this.form.name)
formData.append('avatar', this.form.avatar)
// 将表单数据和文件一起提交到后端
this.$http.post('/api/user', formData).then(res => {
this.$message.success('提交成功')
}).catch(error => {
this.$message.error('提交失败')
})
} else {
this.$message.error('表单验证失败')
return false
}
})
}
}
}
</script>
```
在后端，使用 Spring Boot 的 MultipartFile 类型来接收
上传的文件，并在 Controller 中处理表单数据和
文件上传的逻辑。具体代码如下：
```java
@RestController
@RequestMapping("/api")
public class UserController {
@PostMapping("/user")
public ResponseEntity<?> createUser(@RequestParam("name") String name,
@RequestParam("avatar") MultipartFile avatar) {
// 处理表单数据和
文件上传的逻辑
// ...
return ResponseEntity.ok().body("创建用户成功");
}
}
```
需要注意的是，由于使用了 FormData 对象来提交表单数据和文件，因此需要在前端使用 axios 或者其他 HTTP 请求库来发送 POST 请求。在上面的代码中，我使用了
Vue.js 的官方插件
vue-
resource 来发送 POST 请求。如果您使用的是 axios，则可以将代码修改为：
```javascript
import axios from 'axios'
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
const formData = new FormData()
formData.append('name', this.form.name)
formData.append('avatar', this.form.avatar)
// 将表单数据和文件一起提交到后端
axios.post('/api/user', formData).then(res => {
this.$message.success('提交成功')
}).catch(error => {
this.$message.error('提交失败')
})
} else {
this.$message.error('表单验证失败')
return false
}
})
}
```
最低0.47元/天 解锁文章
1987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
