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

已于 2024-01-15 15:22:41 修改
阅读量1.6k 收藏 23
点赞数 25
分类专栏： JS实战记录 vue2实战记录 文章标签： 前端 vue.js elementui
于 2024-01-04 10:44:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37635012/article/details/135378518
版权
本文介绍了在Vue.js项目中使用ElementUI的el-autocomplete组件实现远程搜索，并在用户选择后填充表单信息。同时详细讲解了el-upload组件如何处理上传文件流，包括限制上传数量、文件预览，以及在编辑模式下如何将文件地址转换为文件流回传给后端。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

在这里插入图片描述
先说第一个需求的解决办法：
这里用到了饿了么组件的el-autocomplete

了解本专栏 订阅专栏 解锁全文 超级会员免费看
post方式下载文件流文件，upload组件上传文件
qq_41823320的博客
04-14 581
这里写目录标题POST 发送请求，下载文件流文件文件上传 POST 发送请求，下载文件流文件 // 程序包下载 programDown(filePath, productKey, versionNum) { this.$axios({ method: "post", // 后台请求接口地址 url: this.$axios.adUserUrl("/productVersion/downloadIssue"), header
结合el-upload上传组件，验证文件格式及大小
杨丫丫的专栏
07-22 1282
结合el-upload上传组件，验证文件格式及大小
el-upload组件一次上传多个文件只调一次后台接口
weixin_41227874的博客
09-09 4174
el-upload组件多文件上传只需要调一次接口
前端如何传递文件流给后台
qq_43610311的博客
12-04 1986
vue传递文件流给后台
以文件流的方式 文件上传 下载
weixin_30596343的博客
01-08 254
HTML: <div class="box-body"> <form id="upload_form" enctype="multipart/form-data" action="/wjgl/fileSave" method="post"&gt...
el-autocomplete后台远程搜索
sinat_34896766的博客
05-26 864
el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete>el-complete可以实现后台远程搜索功能，但有时传入数据为空时，接口可能会报错。此时可在querySearchAsync方法中，根据queryString判断，若为空，则不掉用接口，直接callback([])，反之则调用接口，返回数据。
vue+element 中表单提交el-form+上传组件el-upload
热门推荐
qq_42894622的博客
06-22 2万+
页面效果 html代码：弹框：表单中包含图片上传的组件el-upload //html <!-- 弹框 --> <div class="dialog"> <el-dialog :title="formTitle" :visible.sync="dialogFormVisible"> <el-form :model...
vue下多文件上传，及表格中文件显示方式
追梦i
10-06 1555
1.使用element-ui中提供的文件上传方式 文件上传 <el-upload class="upload-demo" action="#" :before-upload="before_upload_Z"//多文件上传，使用的方法 :file-list="fileList_Z"//多文件集合 :on-preview="handlePreview_Z"//文件上传之后，点击文件进行查看文件 :on-exceed="handleExceed_Z"//上传失败提醒方式 :on-remove="remov
自定义el-upload实现图文上传
我爱吃兔兔的博客
09-06 1937
一、跨域踩坑（axios）： 第一步：config/index.js文件设置跨域 dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/':{//此处并非一定和url一致。 target:'后台ip+端口地址', changeOrigin:true,//允许跨域 pathRewrit...
upload 文件自动上传写法，前后端 下载流文件流
m0_52946104的博客
11-11 638
【代码】upload 文件自动上传写法，前后端 下载流文件流。
apache fileupload处理文件上传（流式和非流式）
12-31
apache fileupload 处理文件上传（流式和非流式）临时文件处理
前端：上传图片upload组件（传formData格式，后端返回图片文件流）
m0_73490383的博客
04-27 1724
第二个接口返回的文件流要转化为base64(可以直接放src属性里显示图片)，转化时用到了FileReader，readAsDataURL()这个方法返回的是data:url形式的字符串。传递给后端的是formData格式的数据，后端返回的是图片的文件流（这其中调了两次接口，第一次接口返回的是图片的不完整路径，第二次调用查询接口返回图片的文件流）使用组件：iview中的upload组件。
前端：文件转换成文件流？(element-u)
qq_37958178的博客
04-27 2258
文件转换成文件流
el-autocomplete组件连接后端接口的代码实现
weixin_43820434的博客
12-08 1917
前端el-autocomplete组件代码 <el-autocomplete class="my-autocomplete" v-model="temp.userId" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"> <template slot-scope="{ item }"> <div class="userI
vue element组件库， el-autocomplete组件修改 （后台搜索/下拉加载）
m0_37656425的博客
09-02 6142
** vue element组件库， el-autocomplete组件修改 （后台搜索/下拉加载） ** 前提： element组件库功能很强大， 但是在实际项目中， 我们会发现， element只能满足 大部分需求，对于少数需求， 用element满足不了， 自写呢，浪费时间， 这个时候就需要我们丰富element-ui了。 1：在使用 element，过程中， 我们要多思，多想。 “瞻...
elementui的el-autocomplete远程搜索组件如何回显结果
优快云_zhhjgy的博客
09-27 4759
<el-autocomplete v-model="SName" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" @select="handleSelectScenic" ></el-autocomplete> 以上是组件标签，这里说明几个关键的参数： fetch-suggestions：返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 call
在elementUI中使用 el-autocomplete 实现远程搜索的下拉框
weixin_30482383的博客
10-27 251
参考;https://blog.csdn.net/qq_37746973/article/details/78402812?utm_source=blogxgwz1 https://blog.csdn.net/Sweet__Cat/article/details/79397071?utm_source=blogxgwz0 转载于:https://www.cnblogs.com/wanqingcu...
el-select远程调接口，并进行选择；el-autocomplete输入远程调接口，并进行选择
ingenuou_的博客
08-09 963
el-select远程调接口，并进行选择；el-autocomplete输入远程调接口，并进行选择
前端将file文件传给后台，后台将文件传给前台（包含上传下载）
个人笔记git：https://gitee.com/tlangp/note.git
08-27 1万+
讲述了前端选择file文件传递给后台、后台将文件发送给前端的整个过程。 拆开讲述了两者分别对应的使用场景。 上传：将文件传给后台 下载：后台传递流给前台
ts中使用el-autocomplete远程搜索
最新发布
09-28
在TypeScript (TS) 中，如果你想在`element-ui`库的`<el-autocomplete>`组件中实现远程搜索功能，你可以利用`el-autocomplete`的`remote-method`属性结合axios、fetch或者其他HTTP客户端库来进行异步数据请求。 首先，你需要安装`axios`或其他你喜欢的HTTP库： ```bash npm install axios // 如果还没有安装 ``` 然后，在你的组件文件里，设置`remote-method`属性，定义一个函数用于发送请求并处理响应： ```typescript import { ElAutocomplete } from 'element-plus'; import axios from 'axios'; export default { components: { ElAutocomplete, }, data() { return { remoteMethod: async (query: string, callback: Function) => { try { const response = await axios.get('your-api-url', { params: { q: query }, // 将查询参数传递给API }); callback(response.data); // 将返回的数据传递给回调函数 } catch (error) { console.error('Error fetching results:', error); callback([]); } }, }; }, }; ``` 在这个例子中，当你在`<el-autocomplete>`输入框中输入内容时，`remoteMethod`会被触发，向指定的URL发送GET请求，并传入查询参数。当服务器响应返回结果时，它会通过回调函数`callback`将数据传递回来，供下拉列表填充。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值