vue+springboot的文件上传处理

1.前端：

2.说明

1.示例：

使用前端框架中的上传组件，例如element plus及arco design，要使用自定义的上传属性或者change属性，获取上传的文件信息。

<template><a-drawer :width="600" :visible="drawerVisible" @ok="handleOk" :ok-loading="okLoading" @cancel="handleCancel"unmountOnClose><template #title><span> {{ title }} </span></template><a-form ref="formRef" :model="insertForm" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"label-align="left"><a-row :gutter="20"><a-col :span="20"><a-form-item field="releaseTime" label="发行时间":rules="[{required: true,message: '发行时间不能为空'}]":validate-trigger="['change', 'blur']"><a-date-pickerv-model="insertForm.releaseTime"style="width: 165px;"show-timeformat="YYYY-MM-DD HH:mm"/></a-form-item></a-col></a-row><a-row :gutter="20"><a-col :span="20"><a-form-item field="forceType" label="是否强制"><a-radio-group :default-value="0"v-model="insertForm.forceType":options="[{ label: '否', value: 0},{ label: '是', value: 1 }]"/></a-form-item></a-col></a-row><a-row :gutter="20"><a-col :span="20"><a-form-item field="content" label="更新内容" :rules="[{required: true,message: '更新内容不能为空'},{maxLength:100,message:'内容不能超过100位'},{validator: (value, cb) => {if (!value.trim()) {cb('更新内容不能为空')} else {cb()}}}]":validate-trigger="['change', 'blur']" ><a-textarea v-model="insertForm.content" placeholder="请填写更新内容"/></a-form-item></a-col></a-row><a-row :gutter="20"><a-col :span="20"><a-form-item field="file" label="附件信息"><a-uploaddraggableaccept=".apk":limit="1":custom-request="customRequest":default-file-list="fileList":show-remove-button="!isUpdate"/></a-form-item></a-col></a-row></a-form></a-drawer>
</template><script lang="ts" setup>
import {ref} from "vue";
import {FormInstance} from '@arco-design/web-vue/es/form';
import {Message} from '@arco-design/web-vue';
import {update, upload, VersionData} from "@/api/appVer";
import {getResult} from "@/utils/api";
import moment from "moment";// 表单对象
const formRef = ref<FormInstance>();
// 触发更新时间
const emits = defineEmits(['handleQuery']);
// 弹窗对象
const drawerVisible = ref(false);
// 表单数据对象
let insertForm = ref<VersionData>({forceType: 0, versionCode: 1});
// 框展示类型
let title = ref();
// 文件信息
const fileList = ref([] as any)
// 是否是更新的标识
let isUpdate = ref(false);
// 定义文件对象
let fileItem: any = {uid: "0"};
// 确定键loading
const okLoading = ref(false);// 打开弹窗
const openDialog = async (row: any, type: any) => {if (type == "2") {insertForm.value = row;title.value = "修改";isUpdate.value = true;// 设置文件信息fileItem = {uid: row.id,name: row.appName,url: row.appPath,};// 设置文件列表fileList.value = [fileItem];} else {title.value = "新增";insertForm.value = {forceType: 0, versionCode: 1}isUpdate.value = false;fileList.value = [];}drawerVisible.value = true;
};// 导出方法在父组件中进行使用
defineExpose({openDialog});// 表单提交
const handleOk = async () => {okLoading.value = true;const validRes = await formRef.value?.validate();// 校验失败直接返回if (validRes) {okLoading.value = false;return;}// 附件必填if (!fileItem.name) {Message.error({content: '附件信息不能为空', position: 'top'})okLoading.value = false;return;}const formData = new FormData();formData.append('file', fileItem.file);formData.append("data", JSON.stringify(insertForm.value))// 调用新增接口let result;// 更新try {if (isUpdate.value) {result = await update({reqBody: {...insertForm.value,idCondition: insertForm.value.id,releaseTime: moment(insertForm.value.releaseTime)},reqHdr: null});} else {result = await upload(formData);}getResult(result);} catch (e) {return;} finally {okLoading.value = false;}// 重置表单formRef.value?.resetFields()drawerVisible.value = false;// 调用父组件方法进行画面刷新emits('handleQuery');
};// 取消
const handleCancel = () => {// 重置表单formRef.value?.resetFields()drawerVisible.value = false;
}// 上传文件
const customRequest = (option: any) => {const {onSuccess} = optionfileItem = option.fileItemonSuccess();
}
</script>

示例说明：

画面中的表单存在可输入的信息以及要上传附件。上传组件如下：

            <a-uploaddraggableaccept=".apk":limit="1":custom-request="customRequest":default-file-list="fileList":show-remove-button="!isUpdate"/>

开启了拖拽上传，设置了可以上传的格式为apk格式，设置了上传文件个数最多上传一个，设置了自定义的上传方法，上传后触发此方法，设置了默认的文件列表，用于修改时进行显示，设置了是否有文件删除按钮，修改时附件信息不可修改。

上传之后，触发了自定义的上传方法，如下：

// 上传文件
const customRequest = (option: any) => {const {onSuccess} = optionfileItem = option.fileItemonSuccess();
}

存储了上传文件的信息，并且执行了上传成功的方法，在画面上会显示上传成功的标志，这是为了让画面显示的更好看，否则会显示上传中的标志，对用户有误导。

点击确定按钮，调用后端的接口，进行文件的上传及信息的存储。如下：

// 表单提交
const handleOk = async () => {okLoading.value = true;const validRes = await formRef.value?.validate();// 校验失败直接返回if (validRes) {okLoading.value = false;return;}// 附件必填if (!fileItem.name) {Message.error({content: '附件信息不能为空', position: 'top'})okLoading.value = false;return;}const formData = new FormData();formData.append('file', fileItem.file);formData.append("data", JSON.stringify(insertForm.value))// 调用新增接口let result;// 更新try {if (isUpdate.value) {result = await update({reqBody: {...insertForm.value,idCondition: insertForm.value.id,releaseTime: moment(insertForm.value.releaseTime)},reqHdr: null});} else {result = await upload(formData);}getResult(result);} catch (e) {return;} finally {okLoading.value = false;}// 重置表单formRef.value?.resetFields()drawerVisible.value = false;// 调用父组件方法进行画面刷新emits('handleQuery');
};

首先进行了表单校验及附件信息的校验。

因为要上传文件，所以使用formData，创建formData对象，存储文件对象及表单对象的字符串。新增时直接调用upload方法，进行上传，使用post方式。api文件中的内容如下：

// 上传数据
export async function upload(params: any): Promise<any> {return axios.post<ResponseData>("/xxxx/file/uploadInfo", params);
}

后端：

package com.kingagroot.info.tianjiannongshi.mvc.controller.file;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.kingagroot.info.common.annotation.log.SysLog;
import com.kingagroot.info.common.domains.standard.netformat.ResponseBean;
import com.kingagroot.info.common.domains.standard.netformat.RtnBean;
import com.kingagroot.info.common.domains.standard.rescodeformat.ResMsg;
import com.kingagroot.info.tianjiannongshi.mvc.persistent.entity.master.base.AppVersionEntity;
import com.kingagroot.info.tianjiannongshi.mvc.service.master.customize.file.SftpService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;import javax.servlet.http.HttpServletRequest;/*** 文件上传控制层API入口** @author Lison 2023/12/11*/
@Api(value = "/xxxx/file", tags = {"文件上传的控制层API入口"})
@RestController
@RequestMapping("/xxxx/file")
public class SftpController {@Autowiredprivate SftpService sftpService;@SysLog@ApiOperation(value = "上传app文件数据接口")@PostMapping(value = "/uploadInfo")public ResponseBean mb1002(@RequestParam("file") MultipartFile file, @RequestParam(value = "data") String data) {RtnBean rtnBean = sftpService.appUpload(file, JSON.parseObject(data,AppVersionEntity.class));if(rtnBean.getRsl()) {return new ResponseBean("uploadInfo", ResMsg.SUCCESS.getRetCode(), ResMsg.SUCCESS.getRetMsg(), rtnBean.getRtnObj());}else {return new ResponseBean("uploadInfo", rtnBean.getResMsg().getRetCode(),  rtnBean.getResMsg().getRetMsg(), null);}}}

后端使用RequestParam进行参数接口，参数名和前端中formData中的key执行，接收到的表单数据可以使用JSON转换为具体的实体类进行使用。

2.说明

①上传时，请求头中的content-type为multipart/form-data格式的。

②使用formData存储表单中的数据以及文件数据，并作为参数传给后端。

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式。主要是用来上传文件。

// 使用append来添加键/值对到表单里面
formData.append('username', 'yang');
// 使用get方法获取key对应的值
formData.get('username');
// 使用delete方法删除键/值对
formData.delete('username');
// 使用set方法，当key存在时，进行更新；key不存在时，进行添加
formData.set('username', 'Chris');
// 使用has方法判断是否存在key
formData.has('username');
//使用entries方法返回一个 iterator对象 ，此对象可以遍历访问FormData中的键值对
var i = formData.entries();
for(var pair of formData.entries()) {console.log(pair[0]+ ', '+ pair[1]);
}
// FormData.keys() 该方法返回一个迭代器（iterator），遍历了该 formData 包含的所有key
for (var key of formData.keys()) {console.log(key);// FormData.values() 方法返回一个允许遍历该对象中所有值的 迭代器 。这些值是 USVString 或是Blob 对象。
for (var value of formData.values()) {console.log(value);
}

③后端可以使用requestParam注解进行文件及表单数据的接收，接收表单数据要使用String类型接收，然后再通过JSON工具类转换成具体的实体对象进行使用。当然，后端也可以使用requestPart进行接收。直接将requestParam换成requestPart即可，表单数据还是使用String类型进行接收。

查看其他资料，后端的表单数据也可以用实体类进行接收，按照下面的方法试了一下，报400的错误，没有实现。

https://blog.csdn.net/qq_38076935/article/details/123008493

@RequestParam和@RequestPart的区别-CSDN博客

SpringBoot @RequestPart 同时接收文件和复杂json数据_requestpart同时接收附件和对象-CSDN博客

④注意使用不同组件时，获取上传文件的方式。

⑤修改时，文件列表的回显可以使用组件的默认值类似的属性。