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

一、官方推荐

好像太麻烦了,难道我每次增加一个文件或图片上传组件都要这样做一边?

另外上面获取token也不完全啊,同时还没有解决回显的问题。

官方说的下面回显问题好像也不大明白

二、采用简单粗暴的方式,直接修改源代码进行重新打包

  下载VForm3的源代码,修改token机制,根据我的项目简单传入header的token与clientId

如下:

<div class="form-conf" v-if="dialog.visible">
        <v-form-render :form-json="formModel" :nbcioHeader="nbcioHeader" :form-data="formData" ref="vfRenderRef"></v-form-render>
        <div class="cu-submit">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>

其中

onBeforeMount(() => {
    const clientid = import.meta.env.VITE_APP_CLIENT_ID;
    console.log("onBeforeMount clientid",clientid)
    nbcioHeader = { "Authorization":"Bearer " + getToken(),
                    "Clientid": clientid }
  });

三、在v-form-render组件里进行修改,把上面的头文件信息传入进去

如:

export default {
    name: "file-upload-widget",
    componentName: 'FieldWidget',  //必须固定为FieldWidget,用于接收父级组件的broadcast事件
    mixins: [emitter, fieldMixin, i18n],
    props: {
      field: Object,
      parentWidget: Object,
      parentList: Array,
      indexOfParentList: Number,
      designer: Object,
      designState: {
        type: Boolean,
        default: false
      },
      subFormRowIndex: { /* 子表单组件行索引,从0开始计数 */
        type: Number,
        default: -1
      },
      subFormColIndex: { /* 子表单组件列索引,从0开始计数 */
        type: Number,
        default: -1
      },
      subFormRowId: { /* 子表单组件行Id,唯一id且不可变 */
        type: String,
        default: ''
      },
      nbcioHeader: { // for ruoyi-nbcio-plus使用
          type: Object,
          default: () => ({})
      },
    },


相关文章
|
安全 前端开发 关系型数据库
IM即时通讯系统开发技术规则
IM即时通讯系统开发涵盖客户端与服务器端,涉及前端、后端、网络通信及多媒体处理等技术领域,支持文字、语音、图片、视频等多种实时交流方式。开发流程包括需求分析、技术选型、系统设计、开发实现、测试优化及部署维护等阶段,需关注网络通信、多媒体处理、安全性及可扩展性等关键技术点,广泛应用于社交、客服、团队协作及游戏等领域。
|
存储 XML Java
Flowable工作流-高级篇
Flowable工作流-高级篇
5520 0
|
缓存
若依 this.$router.push 同地址不同参,页面不刷新问题
若依 this.$router.push 同地址不同参,页面不刷新问题
1497 0
|
存储 Java API
写给大忙人看的 - Java中从MinIO服务器中下载文件(3)
前面两章介绍了 MinIO 文件服务器的环境搭建,以及在 Java 中上传文件至 MinIO 文件服务器中,现在,一起来看下如何从 MinIO 文件服务器中下载文件吧
2444 0
|
12月前
|
缓存 应用服务中间件 PHP
502错误是nginx返回的吗(502错误和nginx有关系吗)
本文详细介绍了Nginx出现502 Bad Gateway错误的原因及解决方法,包括缓冲区错误、Header过大和PHP-CGI进程不足等问题,并提供了增大缓冲区、调整Header大小及增加PHP-CGI进程数量的具体步骤。此外,还解释了502错误的含义及其可能原因,如上游服务器故障、网络故障和配置错误,并给出了检查上游服务器、代理配置及联系网络管理员等多种解决方案。以上内容仅供参考,具体操作需根据实际情况调整。
3652 4
|
移动开发 前端开发
VForm3的文件上传后的一种文件回显方式
VForm3的文件上传后的一种文件回显方式
314 0
|
9月前
|
前端开发 Java API
SpringBoot整合Flowable【07】- 驳回节点任务
本文通过绩效流程的业务场景,详细介绍了如何在Flowable工作流引擎中实现任务驳回功能。具体步骤包括:获取目标任务节点和当前任务节点信息,进行必要的判空和逻辑校验,调用API完成节点回退,并清理相关脏数据(如历史任务和变量)。最后通过测试验证了驳回功能的正确性,确保流程能够成功回退到指定节点并清除中间产生的冗余数据。此功能在实际业务中非常有用,能够满足上级驳回自评等需求。
957 0
SpringBoot整合Flowable【07】- 驳回节点任务
基于若依ruoyi-nbcio支持flowable流程角色,同时修改流转用户为username,流程启动做大调整(一)
基于若依ruoyi-nbcio支持flowable流程角色,同时修改流转用户为username,流程启动做大调整(一)
553 1
|
12月前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
1425 0
|
12月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2619 0