目录
使用前端框架中的上传组件，例如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-picker
v-model="insertForm.releaseTime"
style="width: 165px;"
show-time
format="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-upload
draggable
accept=".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} = option
fileItem = option.fileItem
onSuccess();
}
</script>示例说明：
画面中的表单存在可输入的信息以及要上传附件。上传组件如下：
<a-upload
draggable
accept=".apk"
:limit="1"
:custom-request="customRequest"
:default-file-list="fileList"
:show-remove-button="!isUpdate"
/>开启了拖拽上传，设置了可以上传的格式为apk格式，设置了上传文件个数最多上传一个，设置了自定义的上传方法，上传后触发此方法，设置了默认的文件列表，用于修改时进行显示，设置了是否有文件删除按钮，修改时附件信息不可修改。
上传之后，触发了自定义的上传方法，如下：
// 上传文件
const customRequest = (option: any) => {
const {onSuccess} = option
fileItem = option.fileItem
onSuccess();
}存储了上传文件的信息，并且执行了上传成功的方法，在画面上会显示上传成功的标志，这是为了让画面显示的更好看，否则会显示上传中的标志，对用户有误导。
点击确定按钮，调用后端的接口，进行文件的上传及信息的存储。如下：
// 表单提交
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 {
@Autowired
private 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转换为具体的实体类进行使用。
①上传时，请求头中的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进行接收。
④注意使用不同组件时，获取上传文件的方式。
https://blog.csdn.net/qq_38076935/article/details/123008493
@RequestParam和@RequestPart的区别-CSDN博客
SpringBoot @RequestPart 同时接收文件和复杂json数据_requestpart同时接收附件和对象-CSDN博客