vue+element-ui+springboot 多图和表单信息一起上传

实现目的

使用vue、element-ui、springboot
实现多图及表单其他信息一起上传

思路

• 使用el-uplaod，设置自动上传为false，使用:http-request自定义上传方法，
• 创建formData对象，将图片以及表单数据放进去，再一起提交到后台

代码

前台

template

<el-dialog title="填写猫咪送养信息" :visible.sync="adoptFormVisible">
      <el-form :model="adoptForm" ref="adoptForm" :rules="adoptFormRules">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="adoptForm.title" type="text" maxlength="40" autocomplete="off" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="送养原因" :label-width="formLabelWidth" prop="cause">
          <el-input v-model="adoptForm.cause" type="textarea" maxlength="200" autocomplete="off" show-word-limit :autosize="{ minRows: 2, maxRows: 3}"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth" prop="contact">
          <el-input v-model="adoptForm.contact"  placeholder="QQ\微信\电话" type="text" maxlength="60" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="adoptForm.address"  type="text" maxlength="60" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="猫咪品种" :label-width="formLabelWidth" prop="cat_varieties">
          <el-input v-model="adoptForm.cat_varieties"  type="text" maxlength="20" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="猫咪性别" :label-width="formLabelWidth" prop="cat_gender">
          <el-radio-group v-model="adoptForm.cat_gender">
            <el-radio label="母猫"></el-radio>
            <el-radio label="公猫"></el-radio>
            <el-radio label="未知"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="猫咪年龄" :label-width="formLabelWidth" prop="cat_age">
          <el-input v-model="adoptForm.cat_age"  type="text" maxlength="20" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="是否绝育" :label-width="formLabelWidth" prop="is_sterilization">
          <el-radio-group v-model="adoptForm.is_sterilization">
            <el-radio label="是"></el-radio>
            <el-radio label="否"></el-radio>
            <el-radio label="未知"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详细描述" :label-width="formLabelWidth" prop="cat_describe">
          <el-input v-model="adoptForm.cat_describe"  type="textarea" maxlength="100" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="领养要求" :label-width="formLabelWidth" prop="requirement">
          <el-input v-model="adoptForm.requirement"  type="textarea" maxlength="100" autocomplete="off" show-word-limit ></el-input>
        </el-form-item>

        <el-form-item label="领养要求" :label-width="formLabelWidth" prop="img">
          <el-input v-model="adoptForm.img" v-if="false"></el-input>
          <el-upload
            action="http://localhost:9999/cat/adopt/insertAdopt"
            ref="uploadimg"
            list-type="picture-card"
            :auto-upload="false"
            :data="adoptForm"
            :file-list="adoptForm.img"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :http-request="uploadFile">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="adoptFormdialogVisible">
            <img width="100%" :src="adoptFormdialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('adoptForm')">取 消</el-button>
        <el-button type="primary" @click="adoptSubmitFun('adoptForm')">确 定</el-button>
      </div>
    </el-dialog>

script

props: ["adoptFormVisible"],
  data () {
    return {
      formLabelWidth: '80px',
      adoptFormdialogVisible: false,
      adoptFormdialogImageUrl:'',
      adoptForm:{
        title:'',
        cause:'',
        contact:'',
        address:'',
        cat_varieties:'',
        cat_gender:'',
        cat_age:'',
        is_sterilization:'',
        cat_describe:'',
        requirement:'',
        img:[],
      },
      adoptFormRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        cause: [{ required: true, message: '请输入送养原因', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        cat_varieties: [{ required: true, message: '请输入猫咪品种', trigger: 'blur' }],
        cat_gender: [{ required: true, message: '请输入猫咪性别', trigger: 'blur' }],
        cat_age: [{ required: true, message: '请输入猫咪年龄', trigger: 'blur' }],
        is_sterilization: [{ required: true, message: '请输入是否绝育', trigger: 'blur' }],
        cat_describe: [{ required: true, message: '请输入详细描述', trigger: 'blur' }],
        requirement: [{ required: true, message: '请输入领养要求', trigger: 'blur' }],
        img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
      },
      formDate:''
    }
  },
  methods: {
    // 发布送养
    adoptSubmitFun(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formDate = new FormData()
          this.$refs.uploadimg.submit();
          
          this.formDate.append('title', this.adoptForm.title);
          this.formDate.append('cause', this.adoptForm.cause);
          this.formDate.append('contact', this.adoptForm.contact);
          this.formDate.append('address', this.adoptForm.address);
          this.formDate.append('cat_varieties', this.adoptForm.cat_varieties);
          this.formDate.append('cat_gender', this.adoptForm.cat_gender);
          this.formDate.append('cat_age', this.adoptForm.cat_age);
          this.formDate.append('is_sterilization', this.adoptForm.is_sterilization);
          this.formDate.append('cat_describe', this.adoptForm.cat_describe);
          this.formDate.append('requirement', this.adoptForm.requirement);
          let config = {
              headers: {
                  'Content-Type': 'multipart/form-data'
              }
          }
          this.$axios.post("/adopt/insertAdopt", this.formDate,config).then( res => {
              console.log(res)
              if(res.data.code == 200){
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                //传值给父组件关闭弹框
                this.$emit("func", false)
                this.$refs[formName].resetFields();
              }else{
                this.$message.error(res.data.msg);
              }
          }).catch( res => {
              console.log(res)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重写upload上传方法
    uploadFile(file){
      this.formDate.append('file', file.file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.adoptFormVisible = false
    },
    handleChange (file, fileList) {
      this.adoptForm.img = fileList;
    },
    handleRemove(file, fileList) {
      this.adoptForm.img = fileList;
    },
    handlePictureCardPreview(file) {
      this.adoptFormdialogImageUrl = file.url;
      this.adoptFormdialogVisible = true;
    }

后台

	@PostMapping(value = "/insertAdopt")
    @ResponseBody
    public Result insertAdopt(@RequestParam(value = "title", required = false) String title,
                              @RequestParam(value = "cause", required = false) String cause,
                              @RequestParam(value = "contact", required = false) String contact,
                              @RequestParam(value = "address", required = false) String address,
                              @RequestParam(value = "cat_varieties", required = false) String cat_varieties,
                              @RequestParam(value = "cat_gender", required = false) String cat_gender,
                              @RequestParam(value = "cat_age", required = false) String cat_age,
                              @RequestParam(value = "is_sterilization", required = false) String is_sterilization,
                              @RequestParam(value = "cat_describe", required = false) String cat_describe,
                              @RequestParam(value = "requirement", required = false) String requirement,
                              @RequestParam("file") MultipartFile[] filex){
//        处理图片
        for(int x = 0; x<filex.length; x++){
            MultipartFile file = filex[x];
            存储图片
        }
        存储其它数据
        return new Result(ResultCode.SUCCESS.getCode(),"成功");
    }