ElementPlus手动上传文件和JSON对象，前后端代码

问题描述

使用elementplus + axios + vue + springboot 上传视频时，因为还要附带Json信息一起发送给后端，前后端代码。

---

前端代码：

<template>
  <el-upload
    ref="photoRef"
    :auto-upload="false"
    :http-request="upload"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>

    <el-button class="ml-3" type="success" @click="submitUpload">
      上传文件
    </el-button>
  </el-upload>
</template>

<script setup>
import { ref } from 'vue'
import server from '../request/index.js'

let photoRef = ref()

function upload(params) {
  let formData = new FormData()
  formData.append('photoRef', params.file)
  formData.append('str', '测试字符')
  server({
    url: '/user/uploadTest',
    method: 'post',
    data: formData,
  }).then((resp) => {
    console.log('success')
  })
}
function submitUpload() {
  photoRef.value.submit()
}

</script>

 :auto-upload="false"  表示选择完文件后不自动上传，后续需要点击按钮手动上传

  ref="photoRef"  当调用submit()方法，会自动调用上传方法

 :http-request="upload"  定义上传方法

#流程：点击上传按钮触发submitUpload()调用 photoRef.value.submit()会自动调用上传方法（自定义:http-request）绑定的方法upload(params)，接收参数为封装文件对象 file属性可与取得文件对象

Axios配置

axios 默认content-type为Json格式，无法上传文件，需要修改请求头content-type为multipart/form-data，

简单办法：构造一个   let formData = new FormData() 对象，append()添加属性， axios的data传入formData  axios会默认修改请求头为multipart/form-data

后端接收

@PostMapping("/user/uploadTest")
    public String uploadTest(
            @RequestParam("photoRef")  MultipartFile photoRef,
            @RequestPart("str") String str
    ){
        System.out.println("文件大小="+photoRef.getSize());
        System.out.println("str = " + str);
        return "上传成功";
    }

使用 @RequestParam("photoRef")接收，值要和formData中对应

补充：当FormData 传入json字符串时

后端接收到的字符串要先还原成被html转义的特殊字符

下面代码是使用hutool工具包

        String unescape = HtmlUtil.unescape(string);//还原成json字符串
        User = JSONUtil.toBean(unescape, User.class);//Json转对象