springboot+element ui实现表单和多张图片的增加功能

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

环境要求：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 isLt10