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

最新推荐文章于 2022-10-14 14:15:50 发布
原创 最新推荐文章于 2022-10-14 14:15:50 发布 · 352 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍如何使用腾讯云上传接口，通过Vue前端组件实现图片上传，并利用v-model双向数据绑定传递地址至后端。详细讲解了选中图片、上传流程及组件间的通信机制。

目标

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

图片详情页

在这里插入图片描述

实现过程

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

实现流程图

在这里插入图片描述

[Vue]对图片上传组件的封装
qq_42241722的博客
02-20 728
ImgUpload.vue <template> <el-upload class="img-upload" ref="upload" action="http://localhost:9527/img/upload" :on-preview="handlePreview" :on-remove="handleRemove" :...
VUE3浅析---VNode虚拟节点&diff算法&计算监听属性
qq_22610595的博客
06-30 920
VUE3浅析---VNode虚拟节点&diff算法&计算监听属性
一个简单的vue上传图片的组件
08-10
一个简单的vue上传图片的组件
vue 封装组件之上传图片组件(el-upload)
m0_58565372的博客
10-14 2485
以上代码就能实现上传图片的功能，并且对新增里面的上传图片和修改里面的上传图片的回显都起作用，代码根据自己的项目进行更改使用即可。2.如果上传图片，项目里面使用次数很多，你可以全局引入，在main.js里引入。以上代码可以直接粘贴使用，但是对于这两行代码需要根据自己的项目实际情况来写。1.在components文件夹里自定义文件名称ImageUpload。3.如果使用次数不多你可以在你所需页面进行引入。4.在自己所需要图片上传的页面。注：2和3选其一即可。
vue图片上传组件
qq_41662119的博客
12-15 4267
前言：很多项目中都需要用到图片上传功能，而其多处使用的要求，为了避免重复造轮子，让我决定花费一些时间去深入了解，最终封装了一个vue的图片上传组件。现将总结再次，希望有帮助。 Layout &lt;div class="upload-wraper"&gt;    &lt;input type="file" id="upload_ele" multiple="false...
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
10-15
本篇文章将详细介绍如何在 Vue CLI 3 环境下正确封装 Svgicon 组件。 首先，我们需要在 `src` 目录下创建一个新的文件夹，用于存储 SVG 图标。例如，我们可以命名为 `Icons/svg`。这个文件夹将存放所有的 SVG 图标...
vue2组件实现懒加载浅析
01-21
一、 什么是懒加载 懒加载也叫延迟加载，即在需要的时候...三、如何与webpack配合实现组件懒加载 1、在webpack配置文件中的output路径配置chunkFilename属性 output: { path: resolve(__dirname, 'dist'), filename:
强大Vue.js组件浅析
11-23
什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is...
vue上传图片组件
前端开发者
08-21 8603
上传图片组件 简介 上传图片组件也是后台管理系统的最重要的基础组件之一，这里功能支持图片文件类型检验，图片大小检验，图片分辨率校验以及图片比列校验等功能。 主要依赖说明 { "element-ui": "2.11.1", "vue": "^2.6.10", "vue-router": "^3.0.1" } 正文 1.组件 src/components/Upload...
基于vue-upload-component封装一个图片上传组件的示例
10-17
主要介绍了基于vue-upload-component封装一个图片上传组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现图片预览组件封装与使用
10-16
主要为大家详细介绍了vue实现图片预览组件封装与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2图片上传组件
08-10
vue2 图片上传组件
Vue-【图片上传组件】
qq_37833745的博客
10-22 861
<template> <div class="upload"> <div class="uploadFile"> <div class="previewBox"> <div class="uploadPreview" v-if="uploadPicPreview"> <ms-viewer :imgUrl="'data:image/jpg;base64,' + uploadPicPr.
vue 前端上传图片组件
weixin_33742618的博客
01-29 374
<template> 　　<div class="update"> 　　　　<!-- 通过input获取文件 ，为了美观使用v-show="false" 将input隐藏 通过input的change事件绑定fileChange--> 　　　　<input type="file" v-show="false" accept="image" ref...
vue 上传图片组件
chenquan23的博客
06-29 678
vue 封装上传图片请求
m0_60997870的博客
06-17 598
vue 封装上传图片接口
vue封装组件之上传图片组件(el-upload)
热门推荐
一个超爱喝可乐的web前端攻城狮
09-14 1万+
vue封装组件之上传图片组件(el-upload) 未上传状态 上传状态 其他状态(查看/删除) 自定义组件文件名称 - 这里叫UploadImg.vue <template> <div> <el-form> <!-- :on-change="uploadFile" --> <el-upload :limit="limit" //最大允许上传个数 action
Vue2.0中vue-scroll组件封装与使用教程
Vue2.0中的vue-scroll组件封装就是一个很好的例子，它使得处理滚动区域的逻辑更加方便。本文将详细介绍在Vue2.0中如何使用vue-scroll组件，以及它的一些常用功能和最佳实践。 #### 什么是vue-scroll？ vue-scroll...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值