submitUpload() { this.$refs.upload.submit()； },

最新推荐文章于 2024-06-04 21:41:16 发布
最新推荐文章于 2024-06-04 21:41:16 发布
阅读量209 收藏
点赞数 2
分类专栏： 代码细节解析 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35821503/article/details/138824277
版权 
    submitUpload() {
      this.$refs.upload.submit();
    },

submitUpload() 是一个函数，调用该函数会将 Vue 组件中的上传组件中的文件上传到服务器上。这个函数通过 this.$refs.upload.submit() 来实现，其中 this.$refs.upload 可以获取到上传组件的 DOM 对象，通过 .submit() 方法来提交上传请求。需要注意的是，在调用该函数之前需要先选择好要上传的文件，否则会上传失败。

滢滢读书哇
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2.Upload上传组件自定义上传实例及注意点
tangcc的博客
09-26 1万+
1.自定义上传时，当选中图片this.$refs.upload.submit() 就会触发:http-request = "httpRequest"事件 。 <el-form-item :label="upload_lable" :label-width="formLabelWidth"> <el-upload class="upload-demo" ref="uplo
element-ui 上传组件-异步问题(简单粗暴)
weixin_46409700的博客
05-01 975
element-ui 上传组件-异步问题(简单粗暴) `提示：适用于 在action填写了上传地址, 想正常上传文件之前再调用别的接口 代码如下： <el-upload ref="upload" :auto-upload="false"> :on-change="changeFile" <el-button size="small" type="primary">点击上传</el-
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element-admin之el-form表单上传多个文件，并与表单一起提交
qq_43033730的博客
07-30 5068
elementUI+vue表单上传多个文件和其他表单数据一起提交 这里使用的formdata提交方式，this.$refs.upload.submit()提交会触发http-request自定义上传方法 element代码 <el-dialog title="文件上传" :visible.sync="uploadVisible" width="650px"> <el-form ref="ruleForm" :model="ruleForm" label-width="100
vue(七)
qq_53293179的博客
04-17 436
组件自定义事件 解绑 总结：
ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台
热门推荐
提莫拌一团蘑菇
11-01 4万+
使用场景： 选取好excel文件后，再把导入的excel文件和参数同时提交给服务器，需要用到文件的手动上传，但是直接拷贝官网的demo会出现问题，下面会具体说明要注意的问题点。???? 直接上代码： index.vue <el-form ref="importList" :rules="ImportRules" :model="importList" label-positio...
VUE+element-ui文件上传
a10534126的博客
03-11 3480
文章目录 图片上传+显示（ImageCropper） 图片上传（el-upload）+显示（img） 文件上传（el-upload） 注意 图片上传+显示（ImageCropper） 此前端代码自己封装了自动文件上传，只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数，后端返回OSS生成的图片访问地址，然后cropsuccess函数将上传成功的图像进行显示。 <template> <div class="app-container">
el-upload封装组件ExcelUpload，支持额外参数
sword_happy的博客
10-18 1286
基于pig-ui进行技术学习，前端采用vue2。在进行Excel上传下载的过程中遇到了需要上传文件同时传递参数的问题，经过修改测试，实现了参数传递。
el-upload组件二次提交不相应
qq_33541596的博客
11-22 1930
<el-dialog :close-on-click-modal="false" :visible.sync="phoneRecordInfo.visible" :append-to-body="true" :show-close="false" width="400px" class="m-dialog" > <div class="body"> <el-form .
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
this.$toast() 了解一下？
12-03
前言 在平时的开发过程中，我们总是先写好一个组件...this.$toast({ duration: 3000, content: '这是一条消息提示' }); 没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦:face_with_monocle:）。那
使用ElementUi中的Upload遇到的坑点
qq_43378800的博客
12-19 5213
使用ElementUi中的Upload 上传遇到的坑点 1、我使用的Ui样式是这个样式，为手动上传形式 2、话不多说，上代码 <el-upload v-model="ruleUserForm.logoUrl" class="upload-demo" ref="upload" action="aaa" :on-preview="handlePreview" :o
elementui el-upload一次请求上传多个文件
D浩DzD的博客
06-19 7024
方法，从而实现多个文件上传，但是有时候，我们希望，当上传多个文件的时候，只给后端发送一次请求，这样就需要先把el-upload的自动上传改为手动上传。注意上传文件接口的请求头中headers中的’Content-Type’要为’multipart/form-data’在使用element中的el-upload是时，当我们要上传多个文件时，el-upload内部会多次调用。使用自定义上传的接口，而不是使用*this.$refs.upload.submit();
文件的读写基本操作
范高伦的博客
09-07 1万+
一、文件是计算机中数据持久化存储的表现形式 读写文件标准操作格式1： 1、打开文件：file1 = open('文件名','读写模式') 2、操作文件 3、关闭文件：file1.close() 文件操作完毕后必须关闭，否则长期保持对文件的连接状态，造成内存溢出的现象发生 读写文件操作格式2： # 1、打开文件 file1 = open('demo.txt','w') # 2、操作文件 file1.write('hello world') # 3、关闭文件 file1.close() 1、打开文件：wi
ElementUI的el-upload 文件上传
java_xxxx的博客
07-27 1万+
今天写项目用到了el-upload，整个控件功能很强大。 我的需求，前端点击上传，径图片保存到指定的文件夹，然后，获得保存后的路径返回给前端，赋值给user.image，之后再将完整的user对象插入数据库。 因为代码封装好了action就是请求路径，我们无法再象往常一样去，发送一个ajax请求，之后返回数据。于是问题出现了，如何获得我保存后的图片的路径呢？ 其实el-upload已经给我们...
element的upload组件与fileupload使用
李闪闪
11-16 5628
element的upload组件与fileupload使用，这里主要讲表单与文件（图片）的上传提交
vue上传文件并显示进度条
IT菜鸟
07-29 1万+
keepFileList 用来备份选择的文件列表，因取消下载后文件列表会被清空，导致不能继续上传。手动使用submit()上传。
vue-router 源码分析——2. router-link 组件是如何实现导航的
最新发布
miyagiSimple的博客
06-04 747
vue-router中 router-link 组件是如何实现导航的。recolve返回的对象里面的内容主要为location, route , href。location是标准化后的to，并且打上了标记表示已标准化，防止多次标准化，提升效率。route是通过遍历pathList和pathMap，利用正则表达式找到的和to匹配的路由对象，里面包含很多需要的内容。href在默认的hash模式下，会在to的前面加上#号，例如这里的’#/foo’。
this.$refs.upload.submit()
08-23
this.$refs.upload.submit()是一个方法，用于提交上传文件的请求。它会触发一个http-request事件，可以在该事件中定义上传文件的逻辑。 这个方法通常会被用于自定义上传功能中，当选中图片后调用this.$refs.upload.submit()来触发上传请求。在http-request事件中，可以获取选中的文件并进行一系列处理，比如创建FormData对象、添加文件参数等。最后，可以使用axios或其他HTTP库发送POST请求，将文件上传到服务器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [ElementUI的upload组件手动上传，并携带参数和excel文件流提交给后台](https://blog.csdn.net/dujing_15620553271/article/details/102842789)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [2.Upload上传组件自定义上传实例及注意点](https://blog.csdn.net/tangcc110/article/details/82859881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值