Springboot + vue +element-ui 实现带参数上传文件功能

Springboot + vue +element-ui 实现带参数上传文件功能

element-ui 代码，上代码

这个功能是在报修系统中截取出来，上传标签中的 :data=“data” 对应data数据类型

<template>
<div>
  <div class="container">
    <div class="row clearfix">
      <div class="col-md-4 column">
      </div>
      <div class="col-md-4 column">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <form role="form">
                <div class="form-group">
                  <label>故障描述</label><input type="text" v-model="repairInfo" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                  <label>故障地址</label><input type="text" v-model="repairPath" class="form-control" />
                </div>
                <div class="form-group">
                  <label>学号</label><input type="text" v-model="studentId" class="form-control" />
                </div>
                <el-select v-model="value" placeholder="选择故障类型">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <br>
                <br>
                <div class="form-group">
                  <label>上传故障图片</label>
                  <el-upload
                      class="upload-demo"
                      drag
                      action="http://localhost:8099/student/upload"
                      :data={repairInfo:this.repairInfo,repairPath:this.repairPath,studentId:this.studentId}
                      multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <p class="help-block">
                  </p>
                </div>
                <div class="checkbox">
                </div> <button type="submit" class="btn btn-default" v-on:click="submit">提交</button>
              </form>
            </div>
          </div>
      </div>
      <div class="col-md-4 column">
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '教学楼故障'
      }, {
        value: '选项2',
        label: '图书馆故障'
      }, {
        value: '选项3',
        label: '宿舍楼故障'
      }, {
        value: '选项4',
        label: '学校场所故障'
      }, {
        value: '选项5',
        label: '实验室故障'
      }],
      value: '',
      repairInfo : "",
      repairPath : "",
      repairType : "",
      studentId : "",
      data: {
        repairInfo : this.repairInfo,
        repairPath : this.repairPath,
        studentId : this.studentId
  }

    }
  },
  methods: {
    submit(){
      this.$ajax.post(base_url + "/student/repair",{
        repairInfo : this.repairInfo,
        repairPath : this.repairPath,
        repairType : this.value,
        studentId : this.studentId
      }).then(response => {
          if (response.data.code == 200){
            alert("提交成功")
            this.repairType="提交成功";
          }else {
            alert("提交失败")
            this.repairType="提交失败";
          }
      })
    }

  }
}
</script>

<style scoped>

</style>

pringboot接口

上代码

 @PostMapping("/upload")
    public Response teacherUpload(HttpServletRequest request, @RequestParam("file") MultipartFile file,
                                  @RequestParam String repairInfo,
                                  @RequestParam String repairPath,
                                  @RequestParam String teacherId)
            throws IOException {
        Response<String> response = new Response<>();

        String fileName = file.getOriginalFilename();
        String newFileName = teacherId + "_" + repairPath + "_" + repairInfo +".jpg";
        // 得到文件保存的位置以及新文件名
        File dest = new File(System.getProperty("user.dir")+
                "/upload_photo/teacher/"+ newFileName);
        try {
            // 上传的文件被保存了
            file.transferTo(dest);
            // 打印日志
            System.out.println("上传成功，当前上传的文件保存在 {}"+ newFileName);
            // 自定义返回的统一的 JSON 格式的数据，可以直接返回这个字符串也是可以的。
            response.setCode(CodeEnum.SUCCESS.getCode());
        } catch (IOException e) {
            log.error("文件上传出错");
            response.setCode(CodeEnum.ERROR.getCode());
        }


        response.setCode(CodeEnum.SUCCESS.getCode());


        return response;
    }