首页 > 其他分享 >elementui中使用input原生上传文件功能并提交到接口

elementui中使用input原生上传文件功能并提交到接口

时间:2024-07-19 15:07:39浏览次数:10  
标签:const elementui 表单 file reader input 上传

需求:表单中直接使用input进行文件上传,并直接传到后端表单接口

 

出现的问题:

1.全局接口配置的请求头是application/json,要传formData需要修改请求头(不可能,绝对不可能)

2.后端不单独对文件进行储存,因此无法使用独立封装的上传组件

 

解决方案:file转base64编码,然后通过JSON格式发送给服务器。

 

代码实现:

            const fileInput = document.querySelector("#file");
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(file);
            const that = this;
            reader.onload = (e) => {
              params.file = e.target.result; // 转化后的base64字符串
              that.fetchSubmit(params);
            };

  

动态表单组件里需要补充input的file相关属性内容:

 

后端解码后乱码问题可参照:

https://www.php.cn/faq/526560.html

标签:const,elementui,表单,file,reader,input,上传
From: https://www.cnblogs.com/nangras/p/18311315

相关文章

  • vxe-弹窗初始化激活选中Vxe-Table表格中第一行input输入框
    1.实现效果2.Modal弹窗的渲染过程一、Vue组件的生命周期Vue组件从创建到销毁会经历一系列的生命周期钩子,这些钩子为开发者提供了在不同阶段插入自定义逻辑的机会。在Modal弹窗的上下文中,这些生命周期钩子同样适用。beforeCreate:组件实例初始化之后,数据观测和事件配置之前......
  • dvwa文件上传漏洞低级,中级,以及高级的难度测试(手把手教会你文件上传)
    在开始之前我们得先了解什么是文件上传漏洞,为什么会产生漏洞?以及文件上传漏洞有什么危害?文件上传漏洞顾名思义是指开发者或者程序员在开发网站的时候没有对用户上传的文件进行识别和过滤,因为很多网站提供的功能比较多,比如前台用户注册上传头像,允许上传图片,视频等等,没有做很好......
  • input输入框 防抖
    1什么是防抖防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始计时。为了避免用户在输入过程中,还没输入完,下面搜索框就一直频繁的在搜索,体验很差。2防抖解决方案首先需要把input的双向绑定v-mode拆......
  • iOS开发基础129-音频录制上传
    在Objective-C中,音频录制过程涉及几个关键步骤,包括配置录音设置、创建和启动录音机、处理录音会话以及将录制的音频文件上传到服务器。下面是一个详细的示例,包括创建一个简单的音频录制应用,以及将录制的音频文件上传到服务器的代码。1.设置音频会话我们需要使用AVFoundation框......
  • 更改文件导致MalformedInputException
    1.异常复现工具及组件版本IDE:IDEA2023.3.2(UltimateEdition)JDK:11SpringBoot:2.7.8报错场景复现编辑application.yml文件后,SpringBoot项目启动失败,报错java.nio.charset.MalformedInputException错误信息如下:org.yaml.snakeyaml.error.YAMLException:java.nio.charse......
  • 使用ElementUI和element-china-area-data库实现省市区三级联动组件封装
    使用ElementUI和element-china-area-data库实现省市区三级联动组件封装在前端开发中,省市区三级联动是一个常见的需求。今天我们将使用Vue.js和ElementUI组件库,结合element-china-area-data库,来实现一个省市区三级联动的组件。这个组件不仅可以提高用户体验,还能大大简化我们的代码......
  • 使用SecureCRT上传下载文件
    一、建立连接用SSH协议,22端口二、连接SFTP快捷键ALT+P​或者右键对话框,点击新建SFTP标签页三、设置目的地址3.1设置本地目录lcd本地目录 3.2远程目录cd远程目录 3.3上传方法put本地目录下的文件名/拖动文件至标签页3.4下载方法get远程目录下的文件名......
  • 使用Django框架实现音频上传功能
    数据库设计(models.py)classMusic(models.Model):"""音乐"""name=models.CharField(verbose_name="音乐名字",max_length=32)singer=models.CharField(verbose_name="歌手",max_length=32)#本质上数据库也是Cha......
  • gitee入门_如何上传文件
    前提条件:1,已经安装完git相关环境2,在gitee上已经创建完仓库1,初始化本地仓库在本地新建一个文件夹,点击鼠标右键,选择gitbash在打开后输入代码:gitinit2,同步文件打开gitee,选择自己的仓库,复制输入:gitremoteaddorigin此处粘贴然后再执行上述图片中的第二步第三步......
  • 如何在上传文件到 COS 时同步获取文件信息
    背景介绍本文将介绍如何在上传文件到COS时同步获取文件信息,如图片的宽高、格式等。目前,可以通过COS上传接口,如PUTObject、CompleteMultipartUploads等将文件存储至COS存储桶中,我们针对以下三种场景提供上传时同步获取文件信息的方式:ReturnBody是COS对外提供的一......