在父组件内调用子组件内的file上传文件

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量148 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinqqqydj/article/details/125290210
版权

在利用Vue写后台管理的时候用到了cropper，为了简单且复用专门封装了一个组件，把子组件的上传按钮设置了隐藏，然后发现在父组件内没有办法直接调用ipt 的file事件，原本在子组件内是利用ref操作元素直接调用@click事件，发现到了父组件无法实现，也尝试使用了this.$emit,最后只能是在子组件单独封装了一个方法，在父组件通过ref操作子组件内的这个方法

子组件内的上传按钮

定义cropState方法

 

在父组件给子组件crop绑定ref

用过ref调用子组件内的方法

本人浅薄认知，如有更好方法可以一起成长啊~

xinqqqydj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 父、子组件通信笔记
BasilGentleman的博客
04-08 360
父、子组件之间的消息相互传递 最近自己写的demo中有涉及到父、子组件消息的及时通信需求。 需求： 父组件需实时监听子组件发出消息 父组件向子组件传递了一张图片的地址 如果图片地址为空则显示上传的按钮，上传成功后，再将图片路径返回给父组件 父组件中使用子组件： @uploadCover ： 给子组件绑定一个名为 img 的事件 :parentImg ： 给子组件传递属性 <template> <my-upload-image @uploadCover="img" :parentI.
Angular4集成ng2-file-upload的上传组件
08-27
ng2-file-upload是一个基于Angular2+的文件上传组件，它提供了丰富的配置选项和事件处理，使得在Web应用中添加文件上传功能变得简单易行。以下将详细介绍如何在Angular4项目中集成并使用ng2-file-upload。 首先，你...
vue单项文件组件,父传子,子传父
kkddqq1121的博客
11-03 161
【代码】vue单项文件组件,父传子,子传父。
element 图片和pdf上传，组件封装
凡尘
04-21 2468
element 图片和pdf上传
vue父组件和子组件数据传递
热门推荐
我的专栏
08-29 2万+
vue父组件和子组件数据传递
Vue中父子组件中的数据传输（子传父）
yunhubuxizz的博客
02-26 906
Vue父子组件间的通信（子传父） ————尚未学习全局事件总线 方法一：利用props配置项： 首先在App组件内写一个函数绑定给子组件（需要参数来接受数据），在子组件中通过props 配置项进行收，然后在子组件内写一个函数调用父组件给子组件绑定的函数并把子组件要给 父组件的数据传输过去。 例子：在App组件内给School组件绑定函数来获取学校名称 //APP组件内 //给School子组件绑定函数 <School :getSchoolName="getS
ASP的内置组件专项课程.ppt
11-12
ASP的内置组件是ASP（Active Server Pages）技术中预装的一系列组件，这些组件在安装ASP时自动注册到Web服务器上，为开发者提供了方便的功能，如广告轮显、内容轮显、文件访问和网页计数等。这些组件的使用极大地...
ntsky 文件上传组件.rar_4 3 2 1_ntsky_file.j_上传文件_上传组件_文件上传
09-21
在压缩包内，"www.pudn.com.txt" 可能是一个包含组件使用说明或者相关链接的文档，而"ntsky 文件上传组件"则很可能是实际的组件源代码或编译后的库文件，供开发者集成到自己的项目中。 使用ntsky 文件上传组件时，...
Java中使用fileupload组件实现文件上传功能的实例代码
08-30
在Java中使用FileUpload组件实现文件上传功能需要导入该组件相应的支撑jar包：commons-fileupload和commons-io（commons-upload组件从1.1版本开始，它的工作需要commons-io包的支持）。 FileUpload组件工作流程： ...
fileuploader:简易的异步文件上传组件
06-29
然后，在JavaScript中，你可以通过调用组件提供的API来初始化它，通常会设置一些配置项，比如上传URL、允许的文件类型等。 3. **事件监听**：fileuploader提供了丰富的事件接口，如`onSelect`（文件选择后触发）、`...
Vue+element图片上传
xinzi11243094的博客
06-05 2万+
这是一个上传图片子组件demo&lt;template&gt; &lt;el-upload class="upload-demo" action="" ref="upload" :auto-upload='false' :on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"&gt; &amp
element组件图片上传
qq_38918953的博客
03-12 2422
1.action：必选参数，上传的地址（就是用post发送请求的地址）； 2.data：上传时附带的额外参数，数据类型是object，可以用来传替token值； **3.name ：上传的文件字段名，数据类型是 string，默认值是file（后端接受图片文件要用file这个字段名！！！！）**可以修改，在 中写入name=“其他字段名”。 ...
关于vue中父子组件进行通信，项目例子（以上传附件为例）
m0_59157023的博客
09-27 234
关于vue中父子组件进行通信，项目例子（以上传附件为例）
elementUI中upload上传组件点击上传按钮，选择文件框弹出前进行提示点击确定则继续弹框选择文件上传
fz_leaves的博客
12-30 1万+
上传组件点击按钮后会直接弹出选择文件框，那么在这中间文件框弹出之前想要进行提示或者进行其他操作怎么办呢 其实实现起来很简单，既然el-upload中的button按钮点击会直接弹出文件选择框，那么我将按钮放在外面模拟上传按钮，提示或操作完成后再触发上传，弹出文件选择框继续上传即可。 点击按钮，若没有选择需求，则会弹出确认框 我的需求是上传之前需要有个下拉选需要勾选，如果没有勾选，或先弹出一个确认提醒框提示回去选择还是继续上传。上代码 template <el-upload class="upl
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1021
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 417
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 629
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 269
el-table实现。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1010
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
"ASP内置组件专项课程：组件功能与应用详解
ASP的内置组件是指在安装ASP时自动注册到ASP Web服务器上的组件，主要包括AdRotator、ContentRotator、ContentLinking、Counter、PageCounter、BrowserCapabilities、Dictionary、FileAccess和DatabaseAccess等组件...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值