vue图片上传组件-封装浅析

最新推荐文章于 2024-07-31 11:41:46 发布

爱学习的curry

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量257

点赞数 1

文章标签： vue.js 前端 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lx_curry/article/details/125287528

版权

目标

前端主动发起图片上传使用的是三方的腾讯云上传接口，前端得到一个已经上传完毕的图片地址，然后把这个地址当成一个接口字段传给我们自己的后端服务

图片详情页

在这里插入图片描述

实现过程

点击响应本地文件的选中框，选中图片会将图片上传到腾讯云上。父组件里面的子组件UploadImg用v-model指令实现父子组件的数据通信，v-model指令相当于给子组件内部传了一个value的属性以及一个input的事件；而在子组件UploadImg里面调用this.$emit(‘input’,从腾讯云获取的图片地址)发送给父组件，从而回显到页面上

实现流程图

在这里插入图片描述

爱学习的curry

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue图片上传组件-封装浅析

前端主动发起图片上传使用的是三方的腾讯云上传接口，前端得到一个已经上传完毕的图片地址，然后把这个地址当成一个接口字段传给我们自己的后端服务点击响应本地文件的选中框，选中图片会将图片上传到腾讯云上。父组件里面的子组件UploadImg用v-model指令实现父子组件的数据通信，v-model指令相当于给子组件内部传了一个value的属性以及一个input的事件；而在子组件UploadImg里面调用this.$emit(‘input’,从腾讯云获取的图片地址)发送给父组件，从而回显到页面上...
复制链接

扫一扫

爱学习的curry CSDN认证博客专家 CSDN认证企业博客

码龄5年

10: 原创

107万+: 周排名

204万+: 总排名

5060: 访问

: 等级

116: 积分

4: 粉丝

8: 获赞

8: 评论

16: 收藏

私信

关注

热门文章

最新评论

小白看了都会的js树转数组
qq_1715: 改成递归的不就行了 [code=javascript] function treeToArray(tree = [], result = []) { for (const item of tree) { result.push(item); if (item.children) { treeToArray(item.children, result); Reflect.deleteProperty(item, "children"); } } return result.sort((a, b) => a.id - b.id); // return result; } console.log(treeToArray(tree)); [/code]
小白看了都会的js树转数组
南希Libra: 你这个方法有一个弊端就是树结构有几层的嵌套，你最后调用这个方法的时候就要嵌套的调用几次 { "id":"11","pid":"","name":"研发部",children:[ { "id":"22","pid":"11",name:"技术部",children:[ { "id":"33",pid:"22","name":"前端",children:[ { "id":"44","pid":"33","name":"vue" }, { "id":"55","pid":"33","name":"react" } ] } ] } ] }] const treeToList = treeToArray(treeToArray(treeToArray(treeArr)))
前端跨域及其解决方案
CSDN-Ada助手: Vue入门技能树或许可以帮到你：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
前端跨域及其解决方案
爱学习的curry: 那当然啦，跟大佬你学的呀
前端跨域及其解决方案
努力学习的江江酱: 整理的真不错

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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