elementui upload与form一起提交

最新推荐文章于 2024-07-09 09:24:08 发布
最新推荐文章于 2024-07-09 09:24:08 发布
阅读量6.7k 收藏 6
点赞数
分类专栏： vue-js 文章标签： form upload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyljz/article/details/103462208
版权
本文介绍了在学生基本信息管理场景下，如何结合ElementUI的Upload组件和Form表单进行照片上传。当存在上传文件时，利用Upload的submit方法提交，否则采用jQuery的POST方法。在页面配置中，设置了Upload的action、data、list-type属性，并通过on-change和on-success事件处理上传过程。
摘要由CSDN通过智能技术生成

学生基本信息管理操作中，有照片，可以上传也可以不上传，在表单界面可以修改照片，el-upload控件可以带额外参数提交，jquery的post模拟不了成表单带文件提交的方式，因此，判断如果有上传文件时，用el-upload的submit方法，没有文件时使用post提交
页面部分：

 <el-form-item label-width="30px">
                                        <el-upload ref="upload" name="photo" style="margin:0 auto;" 
                                                   :auto-upload="false"
                                                   :data="frmst"
                                                   action="/Admin_Areas/StInfo/SaveStinfo"
                                                   :show-file-list="false"
                                                   list-type="picture"
                                                   :on-change="filechange"
最低0.47元/天 解锁文章
wyljz
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.ts + ElementUi Upload上传组件+form表单数据
xiaofuge027的博客
03-18 664
参考：https://www.cnblogs.com/rxbook/p/11966054.html 表单中提交表单数据和上传文件； 使用 创建formData对象的方式： <el-form ref="uploadCertificateForm" :model="uploadCertificateForm" :rules="uploadCertificateFormRu...
ElementUI Form：Upload 上传
ChinaDragon10的博客
02-01 785
ElementUI Form：Upload 上传
form表单数据和文件一起提交
最新发布
qq_39290137的博客
07-09 546
1、form表单数据和文件一起提交 2、对象转form-data
Vue项目中element-ui 上传文件upload与form一起提交
sea9528的博客
11-05 7601
需求：提交表单数据和上传文件同步进行，请求一次接口。 elementui中的upload组件上传文件时能附带额外的参数，所以可以把表单数据作为上传时附带的额外参数提交给后台。 <el-dialog class="add_box" :title="title" :visible.sync="editFormVisible" width="25%" style="min-width:1100px;" @click="closeDial
element关于form表单其他参数+upload文件 一起提交
m0_61702149的博客
10-28 3765
element的upload上传文件
ElementUI文件上传组件，表单数据和文件一起提交，以及对象转form表单，对象的拷贝
m0_49194578的博客
05-31 1万+
需要将表单的参数和文件一次性提交 大概流程就是 1，关闭表单的自动提交， 2，自定义提交方法，在其中把inputstream中的文件取出来，或者你可以使用其他钩子，单反能有file文件的都行，当然这个是最方便的，至于文件，你可以勇一个变量接文件，也可以事先把放在变量里，在这里取出来直接就放进去了 3，将数据对象转为表单数据，可以循环取，也可以一个一个put 4，发起axios请求提交表单 核心就是阻断组件自己的提交流程，把数据取出加入到自己的中一并提交 表单部分 自定义的提交函数 我们真正执行表单
使用elementui，upload组件，既要上传文件，又要提交表单
c17315377559的博客
03-29 5397
概述：之前遇到过一种场景，就是既要上传Excel表格，又要提交表单内容到后台，我使用的是elementui中el-upload组件，搜了很多资料，发现都不太好用。后来看官方文档发现，人家提供了这个接口给我们使用。 适用场所：既要提交文件，又要提交表单。且是同一个api处理 el-upload代码: <el-upload class="upload-demo" ref=...
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
qq3892997的博客
11-10 2917
ElementUI的el-upload上传组件与表单一起提交遇到的各种问题以及解决办法（超详细，每个步骤都有详细解读）
elementui的el-form和el-upload上传文件和表单数据
cocogogogo的博客
04-22 1万+
表单数据和文件一起上传，el-upload的使用
elementui from表单提交_element-ui Form表单验证
weixin_35437233的博客
12-31 860
shopInfo-:action="action":on-success="handleSuccess":data="uploadData":limit="20"list-type="picture-card":on-preview="handlePreview":on-remove="handleRemove">立即创建重置.company {padding: 30px;text-alig...
SpringBoot+elementUI图片跟随表单一起上传
weixin_43132641的博客
09-04 5518
图片跟随表单一起上传 前端如果直接读图片的二进制数据在数据传输时会报错，所以先读取图片的字符串数据存到额外参数再传到后台进行转换可以比较简单的实现。 vue前端用elementUI上传组件auto-upload=”false”关闭自动上传 &amp;lt;el-upload class=&quot;avatar-uploader&quot; action=&quot;#&quot; :show-file-list=&quot;false&quot
elementUI+vue upload上传文件与表单内容一起提交，验证文件类型
luoluo_wjx的专栏
12-05 6282
要求：1、文件与表单一起提交 2、需要验证文件类型：文件必须为word，excel，txt等文本类型 本文主要是解决文件与表单一起上传时，需要验证文件类型，如何验证文件类型。如何将表单其它项与文件一起提交保存暂不做说明。 看了官方得文档 使用钩子函数:before-upload="beforeAvatarUpload" beforeAvatarU...
element 组件upload form 验证
weixin_42390015的博客
08-12 1876
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" style="width:600px"> <el-form-item label="文件" ref="excel" prop="file" > <el-upload :action="uploadUrl" :...
element-ui 表单同时提交文件_Java文件上传是如何实现的？
weixin_39626181的博客
12-24 621
在Web应用中，由于大多数文件的上传都是通过表单的形式提交给服务器的，因此，要想在程序中实现文件上传的功能，首先得创建一个用于提交上传文件的表单页面。需要注意的是，为了使Servlet程序可以获取到上传文件的数据，需要将表单页面的method属性设置为post方式，enctype属性设置为“multipart/form-data”类型，添加文件的input标签类型设置为file类型。示例如下：用户...
通过el-upload同时上传表单和文件
HARDWORKING SURELY PAYS OFF
04-14 2784
通过el-upload同时上传表单和文件 上传前，el-upload组件选哟 设置on-change，在上传时检测是文件是否符合标准（格式、大小），不符合标准在fileLIst中删去并用$message弹出错误 关闭el-upload的自动上传 设置accept，选择可以请求的文件类型 将action设为空 上传时，需要在提交请求前处理文件 设置一个新的formData格式的变量，将文件加入其中，再将其赋值给传递的变量 在接口处，设置header中content-type属性为multipart/
【日常Exception】第八回：Failed to load resource: net::ERR_CONNECTION_RESET
热门推荐
Yangy的博客
06-01 1万+
使用ajax进行文件上传，代码如下：//上传资源 function uploadFile(obj){ //获取上传文件 var preFile = obj.files[0]; if(preFile == undefined || preFile == "") { layer.msg("请选择上传的文件!", {icon: 5}); return false; } ...
elementui from表单提交_elementui upload与form一起提交
weixin_29191761的博客
01-13 1755
学生基本信息管理操作中，有照片，可以上传也可以不上传，在表单界面可以修改照片，el-upload控件可以带额外参数提交，jquery的post模拟不了成表单带文件提交的方式，因此，判断如果有上传文件时，用el-upload的submit方法，没有文件时使用post提交页面部分：:auto-upload="false":data="frmst"action="/Admin_Areas/StInfo/...
vue el-upload form 同时提交
tsxylhs的博客
09-05 2053
vue el-upload form 同时提交 项目需要form 表单和文件上传同时在一个请求,废话不多说上代码: 上传的组件使用pug格式 .row.my-4 .col-12 el-form(:model='domain', :rules='validateRules', v-loading='loading',...
elementui 上传图片和 from 表单提交方式
09-28
在提交表单时，你可以使用elementUI提供的el-form组件来处理表单的提交方式。 代码示例： ```html <el-form :model="form" ref="form" label-width="100px"> <el-form-item label="姓名"> <el-input v-model="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值