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);
    }
  }

三效果图如下:


相关文章
|
5月前
|
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。建议将此类功能封装为通用组件以复用。
99 2
前端上传文件前校验文件数据
|
2月前
|
XML JSON Java
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
本文介绍了在Spring Boot中如何实现文件上传,包括单文件和多文件上传的实现,文件上传的表单页面创建,接收上传文件的Controller层代码编写,以及上传成功后如何在页面上遍历并显示上传的文件。同时,还涉及了`MultipartFile`类的使用和`@RequestPart`注解,以及在`application.properties`中配置文件上传的相关参数。
springboot文件上传,单文件上传和多文件上传,以及数据遍历和回显
|
6月前
|
移动开发 前端开发
VForm3的文件上传方式
VForm3的文件上传方式
179 0
|
6月前
|
编解码 JavaScript PHP
文件上传绕过的常见方式
文件上传绕过的常见方式
87 0
|
6月前
|
JavaScript 前端开发 PHP
34、文件上传 -- 绕过JS验证
34、文件上传 -- 绕过JS验证
52 0
|
6月前
|
Java 应用服务中间件 Android开发
UEditor自定义图片/文件上传路径与回显
UEditor自定义图片/文件上传路径与回显
538 0
|
监控 算法 Java
记一次从任意文件下载到getshell
记一次从任意文件下载到getshell
133 0
|
前端开发
前端下载文件的几种方式
前端下载文件的几种方式
1179 0
|
缓存 Java
sevlet实现下载文件功能
希望做一个小板块,实现文件的上传和下载,那么上传实现了,就需要实现下载,阅读了各位的博客总结了一下。在网页中通过超链接是可以访问我的资源的,浏览器不可访问的资源他就会下载到本地,像一些浏览器可以直接访问的如图片,txt文件浏览器会直接打开。这就需要我们在sevlet中统一处理文件下载。
143 0
sevlet实现下载文件功能