FormData后端springboot交互（包含附件上传和数据）前端使用vue和elmentui

目录

前言

1.VUE中FormData的应用

2.封装formdata类型的axios

3.后端springboot数据接收

---

前言

form表单中包含的附件已经form数据需要同时传递到后端时候 原先使用json方式已经不是很能满足需要，需要用FormData 进行数据传递。

1.VUE中FormData的应用

//Data中定义
formData: new FormData()

// 获取form转字符串
  this.formData.append("data", JSON.stringify(this.form));

//获取附件
 for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
            this.formData.append("files", this.$refs.upload.uploadFiles[i].raw);
  }

2.封装formdata类型的axios

const service = axios.create({

  baseURL: localhost:89, //后端地址
  // 超时
  timeout: 10000
})

//设置数据传输类型 'multipart/form-data'
service.interceptors.request.use(config => {
 
  config.headers.post['Content-Type'] = 'multipart/form-data'
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})


export default service

3.后端springboot数据接收

  @PostMapping("/addFiles")
    public AjaxResult addFiles(HttpServletRequest  request, HttpServletResponse response, String data)
    {
// HttpServletRequest 转 multipartHttpServletRequest 用于获取附件
      
   MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
   List<MultipartFile> multipartFiles = multipartHttpServletRequest.getFiles("files");//获取附件

        Object object =  JSONObject.parse(data); //String 转json

        ObjectMapper objectMapper = new ObjectMapper();
      User user= ObjectMapper.convertValue(object,User.class); //json转实体类

       
        return ajaxResult;
    }