<input type="file" value="" id="file" @change="uploadTest">

script中

methods: {
uploadTest (e) {
let formData = new FormData()
let data = JSON.stringify({
aa: 'xxx',
bb: 123
})
formData.append('file', e.target.files[0])
formData.append('data', new Blob([data], {type: 'application/json'})) // 同时上传文件和JSON,这里1.用动new Blob;2[data]中括号;3.必须加type,postman见本站 https://blog.csdn.net/FRESHET/article/details/121286971

//   后台测试地址
let url = 'http://192.168.1.103:8081/upload'
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
this.$axios.post(url, formData, config).then(function (response) {
console.log(response.data)
})
}
}

后台代码：

@CrossOrigin
@PostMapping("/upload")
@ResponseBody
public String upload(@RequestPart("file") MultipartFile file,@RequestPart Map<String,Object> data ) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}

String fileName = file.getOriginalFilename();
String filePath = "E:\\vuetest\\vue_upload\\";
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
System.out.println(data.get("aa"));
System.out.println(data.get("bb"));
System.out.println("upload ok");
return "上传成功";
} catch (IOException e) {
System.err.println(e.toString());
}
return "上传失败！";
}

xxx
123
upload ok

FormData 数据形式为键值对，数据可通过XMLHttpRequest.send（）方式发送出去 FormData.append（key,value）：向FormData对象中添加一个键值对，如执行FormData.append（key1,value1）后FormData.append（key1,value2），key1对应值value1不会被覆盖，而是新增对应值value2 FormData.get(key)：返回FormData对象中给定key对应的第一个值 FormDa.. @PostMapping("/uploadVideos") public Result insertVideos(@RequestPart(value = "file", required = false) MultipartFile file, @RequestPart("material") TbVideo tbVideo) { 点击编辑，是这样，支持回显 选择一张新的图片 上传 的时候，后台回把新的图片 上传 到图片服务器，再次 上传 ，后台会把上一次 上传 的图片再删除，只保留最新的。 如果点击确定，那么后台会更新数据库里面的图片地址，并且保证图片服务器中的图片与数据库中一一对应 如果点击取消，那么之前的选择的图片也会从图片服务器中删除... @RequestMapping("/uploadImg") @ResponseBody public Json Result uploadImg(@RequestParam(value = "file", required = false)MultipartFile file, HttpServletRequest request) { String path = "D:/ieop/img"; String fileName = file.getO 1. 前端 页面 前端 页面需要有一个 上传 视频的功能，可以使用`<input type="file">`标签实现。在 上传 时，可以通过`FormData`对象将视频 文件 和一些其他 参数 一起发送到 后端 接口。示例 代码 如下： ```html <template> <input type="file" @change="handleFileUpload"> <button @click="uploadVideo"> 上传 </button> <video v-if="videoUrl" :src="videoUrl" controls></video> </template> <script> export default { data() { return { videoUrl: '' methods: { handleFileUpload(event) { this.videoFile = event.target.files[0] async uploadVideo() { const formData = new FormData() formData.append('file', this.videoFile) formData.append('name', 'video') const response = await fetch('/api/upload', { method: 'POST', body: formData const data = await response. json () if (data.success) { this.videoUrl = data.videoUrl </script> 2. 后端 接口 后端 接口使用 SpringBoot 框架，需要使用`@RestController`和`@PostMapping`注解来实现视频 上传 接口。 接收 到视频 文件 后，可以使用FFmpeg库来处理视频 文件 ，将视频转换为指定格式或者提取视频的缩略图等。 ```java @RestController public class VideoController { @PostMapping("/api/upload") public ApiResponse uploadVideo(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ApiResponse.error(" 上传文件 不能为空"); try { // 保存视频 文件 并返回视频的URL String videoUrl = saveVideo(file); return ApiResponse.success(videoUrl); } catch (Exception e) { e.printStackTrace(); return ApiResponse.error(" 上传 失败"); private String saveVideo(MultipartFile file) throws Exception { String fileName = UUID.randomUUID().toString() + ".mp4"; File dest = new File("uploads/" + fileName); file.transferTo(dest); return "http://localhost:8080/uploads/" + fileName; 3. 视频处理 视频处理需要使用FFmpeg库来实现。在 SpringBoot 项目中，可以使用`ProcessBuilder`来执行FFmpeg命令。下面是一个实现视频转换为MP4格式的示例 代码 ： ```java private void convertToMp4(String inputPath, String outputPath) throws Exception { String command = String.format("ffmpeg -i %s -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k -movflags faststart -f mp4 %s", inputPath, outputPath); Process process = new ProcessBuilder(command.split(" ")).redirectErrorStream(true).start(); InputStream inputStream = process.getInputStream(); BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream)); String line; while ((line = reader.readLine()) != null) { System.out.println(line); process.waitFor(); reader.close(); inputStream.close(); 以上是实现视频 上传 和回显的基本步骤，具体实现还需要根据具体需求进行调整。