场景

ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收：

https://mp.csdn.net/console/editor/html/107979828

上面讲了怎样使用el-upload控件传递给后台进行接收。

可以看到el-upload传递额外的参数时使用的data格式为

:data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"

其中upload.updateSupport是布尔类型变量，而upload.lxyf是时间选择器选择的值，是Date类型，其默认值

      // 导入参数upload: {// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,//轮休月份lxyf: new Date(),// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/kqgl/lxsz/importData",},

取得是当前日期。

页面上设置这个参数时是个时间选择器

那么在将此事件参数lxyf和下面的勾选框的布尔类型的两个参数通过如下方式进行传递时

:data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"

在SpringBoot后台中接收的方式

    @RequestMapping("/importData")@ResponseBodypublic AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,@RequestParam Date lxyf) throws Exception {}

布尔类型的参数能接收到，但是Date类型的参数就接收不到。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

这是因为采用上面那种

:data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"

格式的传递时间参数，会将其格式化为String字符串格式，传递到后台时就不能再用Date去进行接收了

而应该是用String进行接收。

    @RequestMapping("/importData")@ResponseBodypublic AjaxResult importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,@RequestParam String lxyf) throws Exception {}

这样就能接收到了但是是字符串，如果想要Date类型的数据，

可以调用下面的字符串转Date类型的方法

Date lxyfDate = str2Date(lxyf);

方法实现

    public  Date str2Date(String dateString) {String FORMAT_STRING = "yyyy-MM-dd HH:mm:ss";String[] REPLACE_STRING = new String[]{"GMT+0800", "GMT+08:00"};String SPLIT_STRING = "(中国标准时间)";try {dateString = dateString.split(Pattern.quote(SPLIT_STRING))[0].replace(REPLACE_STRING[0], REPLACE_STRING[1]);SimpleDateFormat sf1 = new SimpleDateFormat("E MMM dd yyyy HH:mm:ss z", Locale.US);Date date = sf1.parse(dateString);return date;} catch (Exception e) {throw new RuntimeException("时间转化格式错误" + "[dateString=" + dateString + "]" + "[FORMAT_STRING=" + FORMAT_STRING + "]");}}

ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到相关推荐

ElementUI 文件上传传递额外参数
需求是在一个表格数据里面做文件上传按钮,需要在文件上传的时候传递当前行的主键id.el-upload组件默认提供的函数都没能实现这个功能,于是对函数的写法稍加更改以实现传递额外参数的功能. HTML部 ...
Postman：传递的参数是List类型时传参格式的写法
Postman传递的参数是List类型实体类中引用了一个List,泛型为其他实体类参数是List集合时,Postman中参数格式如下图所示: 有不明白的地方,欢迎留言东小店邀请码:w56mho
ElementUI上传文件和额外参数
ElementUI 上传文件和额外参数需求是: 现有一后端接口,POST类型,参数为 @RequestParam("file") MultipartFile file,int c ...
ElementUI中el-upload怎样上传文件并且传递额外参数给Springboot后台进行接收
场景需要将Excel中的数据导入到数据库中,就会用到文件上传的功能. 这里使用ElementUI的el-upload控件实现文件上传. 注: 博客: https://blog.csdn.net/ba ...
Vue中使用Axios传递数组参数给SpringBoot后台时的实现方式
场景在前端需要实现多选,然后将所选的序号的数组传递到后台Springboot接口需要传递的参数是一个int数组. handleCompleted() {if (this.ids == null | ...
MVC 使用 Webuploader 插件传递额外参数备忘笔记
// 实例化uploader = WebUploader.create({pick: {id: '#filePicker-2',label: '点击选择图片'},formData: {key: $(& ...
bootstrapinput传参数_bootstrap-fileinput组件在上传时传递额外参数 Web程序 - 贪吃蛇学院-专业IT技术平台...
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...
bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法fodderType = function() {return $("#fodderType ...
html文件上传添加额外参数,bootstrap-fileinput组件在上传时传递额外参数
解决方法关键的配置参数是uploadExtraData 具体的代码如下: //获得额外参数的方法 fodderType = function() { return $("#fodderTy ...

ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到

场景

实现

ElementUI中el-upload传递额外参数为date类型时后台SpringBoot接收不到相关推荐

最新文章

热门文章