功能要求：图表和表单一起做增加

环境要求：springboot2.4，element ui

这里附上element ui前端代码

一.html部分

        <el-form-item label="景点图片" :label-width="formLabelWidth" prop="imgUrl">
          <el-input v-model="SightForm.imgUrl" v-if="false"></el-input>
          <el-upload
            action="#"
            ref="uploadimg"
            list-type="picture-card"
            :auto-upload="false"
            :data="SightForm"
            :file-list="SightForm.imgUrl"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="uploadFile"
            :before-upload="beforeAvatarUpload"
            :multiple="true"
            :limit="6"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

解释：
v-model="SightForm.imgUrl"里面中绑的值是你在data里面定义的SightForm对象的对象属性里面的值，这个值也可以拿出来不放在SightForm对象里面，因为这个值只在页面用，数据传输用的不是这个值。

下面附上data里面需要用的定义

二.data部分

data() {
            return {
                formLabelWidth: '80px',
                dialogVisible: false,
                dialogImageUrl: '',
                SightForm: {
                    sightName: '',
                    SightDesc: '',
                    imgUrl: []
                },
                rules: {
                    sightName: [
                        {required: true, message: '请输入景点名称', trigger: 'blur'}
                    ],
                    SightDesc: [
                        {required: true, message: '请输入景点描述', trigger: 'change'}
                    ],
                    imgUrl: [{required: true, message: '请上传图片', trigger: 'blur'}],
                },
                formDate: ''
            }
        },

注意：(1)SightForm是我定义的需要传输的对象，里面放的是我定义的对象的参数，我把imgUrl拿出来在el-form-item 和el-input标签做了规则判断。

（2）ref一定要写，这是图片传输的重点；:auto-upload="false"表示不自动传输，改成手动传输；:http-request=" "这里面写你图片传输的方法，我的图片传输方法是uploadFile；:multiple="true"表示支持多文件传输；:limit="6"限制传输的文件个数。其他属性参数可以见element ui官网Upload组件，参考链接：Upload 上传

三.方法部分

        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.formDate = new FormData()
                        this.$refs.uploadimg.submit();

                        this.formDate.append('name', this.SightForm.sightName);
                        this.formDate.append("desc", this.SightForm.SightDesc);

                        axios.post("/api/sight/addSight", this.formDate, {
                            headers: {'Content-Type': 'multipart/form-data'}
                        }).then((res) => {
                            if (res.data == "1") {
                                this.testreload()
                            }
                        })
                            .catch((err) => {
                                return err
                            })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 重写upload上传方法
            uploadFile(file) {
                this.formDate.append('file', file.file);
            },
            handleChange(file, fileList) {
                this.SightForm.imgUrl = fileList;
            },
            handleRemove(file, fileList) {
                this.SightForm.imgUrl = fileList;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload(file) {
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
                }
                if (!isLt10M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return (isJPG || isPNG) && isLt10M;
            }
        }

注意：(1)这里用了规则验证，所以，form标签里面的ref要写你自己创建的对象。如图

（2）这里用了 axios.post，所以项目一定要安装axios，并且引入axios。如图：

（3）一定不要忘记在提交数据之前先执行图片上传方法：this.$refs.uploadimg.submit();这里的uploadimg就是el-upload组件里面ref里面的值。

（4）uploadFile方法和submitForm方法里面的类似this.formDate.append('file', file.file);的append代码，'file'就是后台的参数名字，file.file是前台页面数据。

（5）handleChange，handleRemove，handlePictureCardPreview是upload组件的图片更改，图片删除，展示图片方法，可见官网说明。beforeAvatarUpload是限制图片上传个数和大小的方法。

前端完整代码：

<template>
  <div>

    <el-form :model="SightForm"
             :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="景点名称" prop="sightName">
        <el-input v-model="SightForm.sightName"></el-input>
      </el-form-item>
      <el-form-item label="景点描述" prop="SightDesc">
        <el-input v-model="SightForm.SightDesc"></el-input>
      </el-form-item>
      <div class="imgsUpload">
        <el-form-item label="景点图片" :label-width="formLabelWidth" prop="imgUrl">
          <el-input v-model="SightForm.imgUrl" v-if="false"></el-input>
          <el-upload
            action="http://localhost:8887/sight/addSight"
            ref="uploadimg"
            list-type="picture-card"
            :auto-upload="false"
            :data="SightForm"
            :file-list="SightForm.imgUrl"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="uploadFile"
            :before-upload="beforeAvatarUpload"
            :multiple="true"
            :limit="6"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </div>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        inject: ['testreload'],
        name: "SightAdd",
        data() {
            return {
                formLabelWidth: '80px',
                dialogVisible: false,
                dialogImageUrl: '',
                SightForm: {
                    sightName: '',
                    SightDesc: '',
                    imgUrl: []
                },
                rules: {
                    sightName: [
                        {required: true, message: '请输入景点名称', trigger: 'blur'}
                    ],
                    SightDesc: [
                        {required: true, message: '请输入景点描述', trigger: 'change'}
                    ],
                    imgUrl: [{required: true, message: '请上传图片', trigger: 'blur'}],
                },
                formDate: ''
            }
        },
        methods: {

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.formDate = new FormData()
                        this.$refs.uploadimg.submit();

                        this.formDate.append('name', this.SightForm.sightName);
                        this.formDate.append("desc", this.SightForm.SightDesc);

                        axios.post("/api/sight/addSight", this.formDate, {
                            headers: {'Content-Type': 'multipart/form-data'}
                        }).then((res) => {
                            if (res.data == "1") {
                                this.testreload()
                            }
                        })
                            .catch((err) => {
                                return err
                            })


                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 重写upload上传方法
            uploadFile(file) {
                this.formDate.append('file', file.file);
            },
            handleChange(file, fileList) {
                this.SightForm.imgUrl = fileList;
            },
            handleRemove(file, fileList) {
                this.SightForm.imgUrl = fileList;
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeAvatarUpload(file) {
                console.log(file)
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt10M = file.size / 1024 / 1024 < 10;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');
                }
                if (!isLt10M) {
                    this.$message.error('上传图片大小不能超过 10MB!');
                }
                return (isJPG || isPNG) && isLt10M;
            }
        }
    }
</script>

<style scoped lang="stylus">
  .imgsUpload
    padding-left 1.3rem
    padding-bottom 2rem

</style>

后端代码如下：

1.springboot默认上传文件大小限制在1M内，需要在配置文件中修改一下：

spring
 servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 30MB

这里设置上传文件为10M

2.保存表单的后端完整代码

   @PostMapping("/sight/addSight")
    @ResponseBody
    public int addSight(@RequestParam(value = "name") String name,
                        @RequestParam(value = "desc", required = false) String desc,
                        @RequestParam("file") MultipartFile[] filex

    ) {
        int res = 0;
        StringBuffer filename = new StringBuffer();
        if (filex == null) {

        } else {
            for (int i = 0; i < filex.length; i++) {
//                   http://localhost:8887/uploadImages/sightImages/1.jpg
                String fileName = filex[i].getOriginalFilename();  // 文件名
                String suffixName = fileName.substring(fileName.lastIndexOf("."));
                String path = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\uploadImages\\sightImages\\";
                String filePath = path;//这个path就是你要存在服务器上的
                fileName = System.currentTimeMillis() + suffixName; // 新文件名
                File dest = new File(filePath + fileName);
                if (!dest.getParentFile().exists()) {
                    dest.getParentFile().mkdirs();
                } else {
                    try {
                        filex[i].transferTo(dest);
                        System.out.println(fileName);
                        filename.append(fileName + ",");
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
            Sight sight = new Sight();
            sight.setImgUrl(filename.toString());
           //这里可以做你的表单保存等操作
            res = 1;
        }
        return res;
    }

注意：（1）@RequestParam里面的值和前端this.formDate.append里面引号里面的值对应，如果写出@RequestParam(value = "name", required = false) String name,的形式就是不强制要求传入name参数，否则就是强制要求参数，没有参数会报错。

（2）我的文件保存在static\uploadImages\sightImages\是我保存图片的目录。

这里参考了vue+element-ui+springboot 多图和表单信息一起上传