VForm3的文件上传后的一种文件回显方式

简介: VForm3的文件上传后的一种文件回显方式

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

一、官方的帮助

  官方好像也没有说清楚这个回显方式,不过看代码,就是原来的名称与url正确就好了。

但实际上传成功后,回显的数据是不正常的,只是response里的数据是正常的,按道理应该是正常上传后应该回写数据,这样就不需要我们单独写代码了。

二、在提交申请表单的时候进行处理

如下代码:

const submit = async () => {
    const data = await vfRenderRef.value.getFormData();
    const Widgetlist = await vfRenderRef.value.getFieldWidgets();
    //替换文件上传成功后的文件名称与url,以便后面回显用
    let fileUpload = Widgetlist?.filter(item => item.type === "file-upload");
    fileUpload?.forEach((fileitem) => {
      data[`${fileitem.name}`]?.forEach((dataitem,index) => {
        data[`${fileitem.name}`][index].name = data[`${fileitem.name}`][index].response.data?.newFileName;
        data[`${fileitem.name}`][index].url = data[`${fileitem.name}`][index].response.data?.url;
      })
    })
    //替换图片上传成功后的文件名称与url,以便后面回显用
    let picUpload = Widgetlist?.filter(item => item.type === "picture-upload");
    picUpload?.forEach((picitem) => {
      data[`${picitem.name}`]?.forEach((dataitem,index) => {
        data[`${picitem.name}`][index].name = data[`${picitem.name}`][index].response.data?.newFileName;
        data[`${picitem.name}`][index].url = data[`${picitem.name}`][index].response.data?.url;
      })
    })
    if (definitionId.value) {
      const res = await startProcess(definitionId.value, JSON.stringify(data));
      proxy?.$modal.msgSuccess(res.msg);
      const obj = { path: "/work/own" };
      proxy?.$tab.closeOpenPage(obj);
    }
  }

三效果图如下:


相关文章
|
4月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
62 2
前端上传文件前校验文件数据
|
6天前
|
XML JSON Java
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
|
5月前
|
移动开发 前端开发
VForm3的文件上传方式
VForm3的文件上传方式
133 0
|
5月前
|
Java 应用服务中间件 Android开发
UEditor自定义图片/文件上传路径与回显
UEditor自定义图片/文件上传路径与回显
463 0
|
JavaScript
使用 HTML input 元素上传本地文件,在服务器端打印出上传的内容
使用 HTML input 元素上传本地文件,在服务器端打印出上传的内容
|
前端开发
前端下载文件的几种方式
前端下载文件的几种方式
1153 0
POST请求body实现数据以记事本格式保存在服务器
POST请求body实现数据以记事本格式保存在服务器
50 0
|
前端开发 应用服务中间件 测试技术
Nginx配置下载附件让浏览器提示用户是否保存
Nginx配置下载附件让浏览器提示用户是否保存
103 0
|
XML 缓存 Java
sevlet3.0上传文件功能
在sevlet3.0以前,java上传文件很麻烦,要么用底层的request.getinputstream。获取流,但是这个流不是干净的流,报过上传的文件名都在文件的前部分,包括文件的结尾也有特殊的字符。需要使用io层层过滤。提取你所需要的文件,鉴于水平有限,我只能提txt文本文件的内容,然而一道图片处理总是丢失或者多出一些东西来。知道原理后也不打算深入研究。
85 0