el-autocomplete远程搜索使用及el-upload上传多个文件流给后端,详情接口返回的是文件地址,前端将文件地址转成文件流,回传文件流给后端

最近遇到一个项目,里面有2个需求我觉得挺常见的,第一个需求是一个表单里,当用户在输入名称后,前端调接口发请求获取到关联名称的企业名称,并展示,然后当用户选中企业后,前端调接口获取选中企业的具体信息,并填充到表单里;第二个需求是,表单里有个上传图片的功能,前端需要在用户点击保存的时候,前端调保存接口将文件流随表单数据一起以formData格式传给后端存起来,如下图,用户在名称输入框输入“武汉”两个字后调接口获取到的数据如下有“武汉市花木有限公司”、“武汉大学”等,当用户选中“武汉大学”后会将接口返回的信息回显,这里将“注册地址”、“统一社会信用代码”回显:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
先说第一个需求的解决办法:
这里用到了饿了么组件的el-autocomplete组件,v-model双向绑定了表单的placeName,这个placeName是要传给后端的数据
在这里插入图片描述


                

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

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

相关文章

异常、反射、注解知识点

1. Java 中的异常 是 Java 提供的一种处理程序中错误的机制。 当发生异常时,JVM 会将异常封装成一个异常对象抛出。此对象用来描述异常信息。 当 JVM 遇到程序异常就会自动停止。 2. 异常分类 Throwable:是 Java 异常的根类,Error 和 Exc…

macOS跨进程通信: XPC 创建实例

一:简介 XPC 是 macOS 里苹果官方比较推荐和安全的的进程间通信机制。 集成流程简单,但是比较绕。 主要需要集成 XPC Server 这个模块,这个模块最终会被 apple 的根进程 launchd 管理和以独立进程的方法唤起和关闭, 我们主app 进…

JAVA版鸿鹄云商B2B2C:解析多商家入驻直播带货商城系统的实现与应用

一、技术选型 java开发语言:java是一种跨平台的编程语言,适用于大型企业级应用开发。使用java开发直播商城可以保证系统的稳定性和可扩展性。 spring boot框架:spring boot是一个快速构建spring应用的框架,简化了开发过程&#xf…

Java大数据hadoop2.9.2搭建伪分布式yarn资源管理器

1、修改配置文件 cd /usr/local/hadoop/etc/hadoop cp ./mapred-site.xml.template ./mapred-site.xml vi mapred-site.xml <configuration><property><name>mapreduce.framework.name</name><value>yarn</value></property> &l…

盲盒、一番赏小程序搭建,打开线上盲盒市场

近几年&#xff0c;我国潮玩市场发展非常迅速&#xff0c;在互联网的影响下&#xff0c;盲盒更是迅速走红网络&#xff0c;深受年轻人的喜欢&#xff0c;各大社交平台上关于盲盒的讨论度也是层出不穷。 一番赏与盲盒的机制都是差不多的&#xff0c;盲盒是在包装一样的盒子中放…

华为 1+X《网络系统建设与运维(初级)》 认证实验上机模拟试题

华为 1X《网络系统建设与运维&#xff08;初级&#xff09;》认证实验上机模拟试题 一、考试背景二、考试说明2.1考试分数说明2.2考试要求2.3考试环境介绍2.4启动考试环境2.5保存答案 三、考试正文3.1考试内容3.1.1任务 1&#xff1a;设备连接3.1.2任务 2&#xff1a;设备命名3…

2024年教资笔试报名开始啦,快看看今年有啥新变化?

2024年教资笔试报名开始啦&#xff0c;网上报名1月12号-1月15号&#xff0c; 网上审核时间&#xff1a;1月12号14&#xff1a;00-1月16号17&#xff1a;00 网上缴费&#xff1a;截止1月17号24&#xff1a;00 准考证打印&#xff1a;3月4-9号 考试时间&#xff1a;3月9号 成…

echarts实现点击不同的柱子实现类目的不同名字

实现效果如下图: 首先实现echarts堆叠柱状图数据为0的不占用x轴空间 option {tooltip: {trigger: axis,axisPointer: {type: shadow},},legend: {},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},xAxis: [{type: category,position: bottom,data: [园区内, 园区…

【大数据】分布式协调系统 Zookeeper

分布式协调系统 Zookeeper 1.Zookeeper 的特点2.Zookeeper 的数据结构3.Zookeeper 的应用场景3.1 统一命名服务3.2 统一配置管理3.3 统一集群管理3.4 服务器动态上下线3.5 软负载均衡 Zookeeper 是 Apache 开源的一个顶级项目&#xff0c;目的是为分布式应用提供协调服务&#…

【C++期末编程题题库】代码+详解18道

适合期末复习c看&#xff0c;或者刚入门c的小白看&#xff0c;有的题会补充知识点&#xff0c;期末复习题的代码一般比较简单&#xff0c;所以语法上没那么严谨。本文所有题目要求全在代码块的最上面。 目录 1、设计复数类 2、设计Computer类 3、实现相加的函数模板 4、圆类…

基于Java SSM框架实现新闻推送系统项目【项目源码】计算机毕业设计

基于java的SSM框架实现新闻推送系统演示 SSM框架 当今流行的“SSM组合框架”是Spring SpringMVC MyBatis的缩写&#xff0c;受到很多的追捧&#xff0c;“组合SSM框架”是强强联手、各司其职、协调互补的团队精神。web项目的框架&#xff0c;通常更简单的数据源。Spring属于…

Python 快速合并PDF表格转换输出CSV文件

单位的刷脸考勤机后台系统做得比较差&#xff0c;只能导出每个部门的出勤统计表pdf&#xff0c;格式如下&#xff1a; 近期领导要看所有部门的考勤数据&#xff0c;于是动手快速写了个合并pdf并输出csv文件的脚本。 安装模块 pypdf2&#xff0c;pdfplumber&#xff0c;前者用…

年底了,准备跳槽的可以看看...

前两天跟朋友感慨&#xff0c;今年的铜九铁十、裁员、疫情导致好多人都没拿到offer!现在已经1月了&#xff0c;具体明年的金三银四只剩下两个月。 对于想跳槽的职场人来说&#xff0c;绝对要从现在开始做准备了。这时候&#xff0c;很多高薪技术岗、管理岗的缺口和市场需求也出…

企业该如何选择好的跨境数据传输平台

跨境数据传输平台是一种可以帮助企业在不同国家和地区之间安全传输数据的工具。它可以通过对数据进行加密、脱敏、压缩等处理&#xff0c;确保数据在传输过程中的安全性和完整性。同时&#xff0c;它还可以根据不同的合规要求&#xff0c;对数据进行分类、分级、备份等处理&…

Prometheus实战篇:Prometheus监控redis

准备环境 docker-compose安装redis docker-compose.yaml version: 3 services:redis:image:redis:5container_name: rediscommand: redis-server --requirepass 123456 --maxmemory 512mbrestart: alwaysvolumes:- /data/redis/data: /dataport:- "6379:6379"dock…

数据结构之各大排序(C语言版)

我们这里话不多说&#xff0c;排序重要性大家都很清楚&#xff0c;所以我们直接开始。 我们就按照这张图来一一实现吧&#xff01; 一.直接插入排序与希尔排序. 这个是我之前写过的内容了&#xff0c;大家可以通过链接去看看详细内容。 算法之插入排序及希尔排序&#xff08…

Spring中的工厂类

目录 1.ApplicationContext 4.2.BeanFactory 1.ApplicationContext ApplicationContext的实现类&#xff0c;如下图&#xff1a; ClassPathXmlApplicationContext&#xff1a;加载类路径下 Spring 的配置文件 FileSystemXmlApplicationContext&#xff1a;加载本地磁盘下 S…

安徽2024考试公告一览表!有需要的速收藏

考公群体&#xff0c;越来越多&#xff01; 考研减少的很多学生转来考公&#xff0c;24年国考人数突破291万&#xff0c;较23年增长约40万 考试难度&#xff0c;逐年增大&#xff0c;逐年创新&#xff01; 结束的24国考&#xff0c;江浙省考&#xff0c;学生普遍反映难度增大&a…

[C#]使用OpenCvSharp实现二维码图像增强超分辨率

【官方框架地址】 github.com/shimat/opencvsharp 【算法介绍】 借助于opencv自带sr.prototxt和sr.caffemodel实现对二维码图像增强 【效果展示】 【实现部分代码】 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin…

代码随想录-刷题第四十七天

139. 单词拆分 题目链接&#xff1a;139. 单词拆分 思路&#xff1a;本题可以使用记忆化回溯&#xff0c;不再过多介绍&#xff0c;主要讲解完全背包方法。 单词就是物品&#xff0c;字符串s就是背包&#xff0c;单词能否组成字符串s&#xff0c;就是问物品能不能把背包装满。…