用post方式，以@RequestParam接收数据

    @PostMapping("/add")
    public void add(@RequestParam("multipartFiles") MultipartFile[] multipartFiles,@RequestParam("material") String material){}
api.js中的方法
 
export function addMaterial(imgfile) {
    return request({
        url: '/material/add',
        method: 'post',
        data:imgfile
从api.js中导入addMaterial方法
 
也可以不这样，是可以直接一个axios方法提交的，这里贴的是自己没有改的代码
 
		add(){
		//this.multipartFiles是需要上传的文件数组
          let imgfile = new FormData();
          for (let i = 0; i < this.multipartFiles.length; i++) {
          //此处要和后端参数名对应
            imgfile.append("multipartFiles",this.multipartFiles[i].raw);
          //此处要和后端参数名对应,将对象转换json
          imgfile.append("material", JSON.stringify(this.material));
          //此处我调用的是api.js中的方法
          addMaterial(imgfile)
          .then(response=>{
          .catch(error=>{
                    springboot同时接收MultipartFile文件和json数据话不多说直接贴代码后端用post方式，以@RequestParam接收数据    @PostMapping("/add")    public void add(@RequestParam("multipartFiles") MultipartFile[] multipartFiles,@RequestParam("material") String material){}前端api.js中的方法export func
本案例是调用GitHub官方提供的API，基于axios，pubsub-js实现一个演示，目的是让自己更加熟悉vue组件化开发思想，和前分离开发中调用接口来获取数据渲染页面。
本文最初发表在博客园，喜欢看博客的同学也可以前往---
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view 
				
@[TOC](org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题解决)
开发框架说明
springboot2.2.7.RELEASE+ MyBatisPlus3.1.1
编译并启动springboot项目后，发起一个http请求http://localhost:8088/tbPpRfidstock/selectInfo，控制台报org.apache.ibatis.bindin
				
转载参考：https://blog.csdn.net/weixin_44673757/article/details/106914356
同时接收文件类型数据和json数据时写法如下，其中TestRequest前不用加@RequestBody注解。
个人认为：此处content-type的类型为：multipart/form-data ，表示表单中进行文件上传。
由于参数中的MultipartFile类型影响了requestbody本应所对应的content-type: application/json,可
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </depe.
  <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