因为自己的毕业设计需要实现这一功能，所以在此记录一下。

我自己的毕设的系统的一个功能的小步骤就需要把前端上传的文件保存到后端，之后再操作，本人还没有学习SpringBoot所以踩了不少坑。

方法介绍

前端使用vue、以及el-upload组件、axios发送post请求。

前端：

<code><div v-for="(item, index) in uploadParam2" class="param_item" :key="index">code>

<div><span class="param_label">{ { item.label }}</span></div>code>

<el-upload

action="#"code>

:auto-upload="false"code>

:show-file-list="false"code>

:before-upload="beforeUpload"code>

:on-change="(uploadFile) => handlerUploadChange(uploadFile, index,2,item.label)"code>

:limit="1"code>

:on-exceed="(files)=>handlerExceed(files, index)"code>

v-model:file-list="item.files"code>

style="display: flex;"code>

>

<template #trigger>

<div class="upload-button">{ { item.fileName === "" ? "点击上传文件" : item.fileName }}</div>code>

</template>

<el-button class="remove-button" @click.stop="removeFile(index,2,item.label)"code>

:class="{isUpload: item.fileName !== ''}">移除code>

</el-button>

</el-upload>

</div>

以上是我自己的代码，没法直接拿来用 ，主要解释一下el-upload：

action属性为上传的地址，这里用#号忽略了

auto-upload为是否自动上传，设置为false，关闭自动上传；

show-file-list 是否显示已上传文件列表

before-upload 上传文件之前的钩子（可以不加，我用来加一些条件），参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

limit 上传文件最大数量

on-exceed 文件超出个数限制时的钩子

file-list 上传的文件列表，使用v-model双向数据绑定了一下

下面是两个按钮一个，默认具有上传功能（我也不知道为啥），所以移除的按钮加了stop阻止它弹出上传文件的框。

、

data中的代码

<code>import com.nlg.TRSH.pojo.Message;

import com.nlg.TRSH.utils.GeoServerUtil;

import jakarta.servlet.http.HttpServletRequest;

import jakarta.servlet.http.HttpServletResponse;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.multipart.MultipartFile;

import java.io.File;

import java.io.IOException;

@RestController

@CrossOrigin(origins = "http://localhost:8080")

@RequestMapping("/export")

public class UpdateLoadController {

private static String UPLOAD_PATH="D:\\dev\\土壤酸化存储数据\\";code>

@PostMapping("/upload")

public Message upload(@RequestParam("file") MultipartFile file ,HttpServletRequest request, HttpServletResponse response) throws IOException {

String savepath = null;

//设置响应编码方式，防止中文乱码

response.setHeader("Content-type", "application/json;charset=UTF-8");

Message message = new Message();

try {

String Filename = null;

if (!file.isEmpty()) {

Filename = file.getOriginalFilename();

}

var path = UPLOAD_PATH + Filename;

System.out.println(path);

//这一行代码就是保存到指定路径，使用的是接口里的方法很方便

file.transferTo(new File(path));

message.setStatus("success");

message.setMessage("保存成功");

int lastDotIndex = Filename.lastIndexOf('.'); // 查找最后一个点的位置

String layername = Filename.substring(0, lastDotIndex); // 获取去除后缀的文件名

//从这开始不用看，上面已经保存完了，代码是我自己封装的一些工具类

boolean exist = GeoServerUtil.judgeWorkSpace("nlg");

String phstore = "ph" + System.currentTimeMillis();

GeoServerUtil.shpJudgeDatabase("nlg",phstore,path,layername,"ph");

message.setUrl("http://localhost:8088/geoserver/nlg/wms");

layername="nlg:"+layername;code>

message.setLayerName(layername);

} catch (Exception e) {

e.printStackTrace();

}

//返回给前端message对象

return message;

}

}

展示