VForm3的文件上传方式

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

gitee源代码地址

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

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

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

gitee源代码地址

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

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

在线演示(包括H5) : http://122.227.135.243: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: () => ({})
      },
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/573678.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智能条件单无需盯盘!

一般我们说到量化交易都觉得很困难&#xff0c;写策略难&#xff0c;看python难&#xff0c;不会使用程序难&#xff0c;电脑交易不方便难&#xff0c;今天我们来看看手机电脑都可以使用的量化基础条件单的操作。 迈入量化第一步&#xff0c;条件单的使用&#xff01; 今天小编…

企业微信hook接口协议,标签变动回调

个人标签新增回调 {"labellist": [{"op": 3, "bDeleted": 0, //0代表新增"create_time": 1678114162, "label_groupid": 14073749131792038, "label_type": 2, "source_appid": 0, "business_typ…

Python 装饰器

Python 装饰器 1. 简单的装饰器 下面是一个简单的装饰器示例&#xff0c;它记录被装饰函数的调用信息&#xff1a; def my_decorator(func):""" 中层函数&#xff1a;接收被装饰的函数 """def wrapper():""" 内层函数&#xf…

嵌入式4-25

整理思维导图在课上练习的基础上&#xff0c;完成拷贝赋值函数完成下列类 #include <iostream> using namespace std;class person {string name;int age;char sex; public:int *p;person(){cout<<"person无参构造"<<endl;};person(const string n…

专业护眼灯什么牌子好?2024年专业护眼灯品牌排行分享

专业护眼灯什么牌子好&#xff1f;各位家长可能已经注意到一个令人关切的现象&#xff1a;戴眼镜的孩子人数在不断上升&#xff0c;许多孩子正在接受眼部治疗。眼睛健康的问题变得越来越普遍&#xff0c;这无疑令人担忧。在当今数字化时代&#xff0c;孩子们每日需长时间阅读和…

对腾讯文档AI助手技术架构的简单分析

腾讯文档全面接入了AI&#xff0c;今天腾讯技术大佬tensorchen作者发表了一篇文章《腾讯文档AI助手技术实践》&#xff0c; 里面讲解了从技术应用架构以及AI大模型赋能角度&#xff0c;介绍腾讯文档AI智能助手的探索和实践之路。作为一款集多功能为一体的AI产品&#xff0c;腾…

Web前端开发之HTML_3

标签之表格Form表单块元素与行内元素&#xff08;内联元素&#xff09;HTML5新增标签 1. 标签之表格 <table></table> 1.1 表格&#xff08;快速生成&#xff1a;table>tr*2>td*3{单元格}&#xff09; 表格由行、列、单元格组成。单元格有同行等高、同列等…

(八)Servlet教程——创建Web项目以及Servlet的实现

1. 打开Idea编辑器 2. 点击界面上的“新建项目”按钮 3. 设置好项目名称和位置 应用服务器选择之前设置好的Tomcat服务器 构建系统默认选择Maven 4. 点击“下一步”按钮 5. 点击“完成”按钮&#xff0c;Idea就创建好了项目&#xff0c;创建完成后的目录结构如下图所示 6. 此…

2024.4.25

#include <iostream> #include <iomanip> using namespace std; class Person{const string name;int age;char sex; public:Person(const string name):name(name){cout << "第一个Person构造函数" << endl;}Person():name("zhangsan&…

js网络请求---fetch和XMLHttpRequest的用法

fetch 语法规则 let promise fetch(url, [options]) //url —— 字符串&#xff1a;要访问的 URL。 //options —— 对象&#xff1a;可选参数&#xff1a;method&#xff0c;header 等。 fetch函数返回一个promise&#xff0c;若存在网络问题&#xff0c;或网址不存在&…

Java通过邮件发送验证码和通过手机号发送验证码

前提&#xff1a;我将验证码存入了map集合&#xff0c;进行验证。 private static HashMap<String, Integer> emailMap new HashMap<>();一、通过邮箱发送验证码&#xff1a; 1、准备条件&#xff1a;引入hutool依赖&#xff0c; <!--hutool--><depend…

【C语言】深入理解KMP算法及C语言实现

一、KMP算法简介 KMP算法&#xff08;Knuth-Morris-Pratt算法&#xff09;是一种高效的字符串匹配算法&#xff0c;由Donald Knuth、James H. Morris和 Vaughan Pratt共同发明。KMP算法的核心思想是当一次字符比较失败时&#xff0c;利用已经得到的部分匹配信息&#xff0c;将模…

Kubernetes TDengine 系列|安装 TDengine 的 Grafana 插件|Grafana监控TDengine数据

为了让Grafana 能够监控到TDengine 数据&#xff0c;快速集成搭建数据监测报警系统&#xff0c;所以直接安装TDengine 插件。 目录 一、安装 TDengine 的 Grafana 插件1、下载TDengine grafana插件2、解压到指定目录3、配置未签名插件 二、配置数据源&#xff0c;简单查询TDen…

想在游泳健身的同时畅听音乐,随时哈氪漫游这款IP68防水的骨传导耳机

平时健身的过程中&#xff0c;音乐是许多健身爱好者的忠实伴侣。无论是在室内的健身房&#xff0c;还是户外的自然风光中&#xff0c;一副优质的耳机可以极大地提升我们的锻炼体验。现在市面上专为运动设计的耳机选择非常多&#xff0c;我喜欢用骨传导耳机&#xff0c;目前在用…

Linux--忘记root密码解决办法

Linux忘记密码解决的方法有两种&#xff1a; 方法一&#xff1a; 第一步&#xff1a;打开虚拟机时&#xff0c;疯狂按方向键&#xff0c;让该虚拟机不进入系统停留在开机界面&#xff0c;按方向键使光标停留在第一行&#xff0c;按字母E编辑它&#xff0c;如 按E后&#xff0…

数据结构 - 链表详解(二)—— 带头双向循环链表

链表的介绍 链表的结构一共有八种&#xff1a;带头单向循环链表、带头单向非循环链表、带头双向循环链表、带头双向非循环链表、无头单向循环链表、无头单向非循环链表、无头双向循环链表、无头双向非循环链表。 今天我们来详解带头双向循环链表 带头双向循环链表是一种数据结…

2024深圳杯C题的8页思路分析+所有代码可执行+参考文献+持续更新参考论文(已经更新了代码与图像)

比赛题目的完整版思路可执行代码数据参考论文都会在第一时间更新上传的&#xff0c;大家可以参考我往期的资料&#xff0c;所有的资料数据以及到最后更新的参考论文都是一次付费后续免费的。注意&#xff1a;&#xff08;建议先下单占坑&#xff0c;因为随着后续我们更新资料数…

用ESP32的ADC引脚,结合分压电路测量电压

该代码基于ESP32&#xff08;Arduino库&#xff09;实现ADC&#xff08;模拟数字转换器&#xff09;数据采集。它配置ADC参数、获取校准特性&#xff0c;循环采样并计算平均值&#xff0c;将ADC读数转换为电压&#xff0c;考虑分压电阻影响&#xff0c;计算实际电压值&#xff…

【论文复现】时间协同制导算法

一、背景部分 如需了解请看李康博士关于该论文背景简介&#xff1a;基于一致性算法的分布式时间协同制导律 - 知乎 (zhihu.com) 论文链接&#xff1a;Distributed Cooperative Guidance for Multivehicle Simultaneous Arrival Without Numerical Singularities (westlake.ed…

Pandas Series显式切片和隐式切片大揭秘

Pandas Series在Python的数据处理中扮演着非常重要的角色。它是一维数组&#xff0c;可以容纳任何数据类型&#xff08;整数、字符串、浮点数、Python对象等&#xff09;&#xff0c;并且提供了大量的方法来进行数据操作和分析。Pandas Series的切片操作是其核心功能之一&#…