vue+input file上传图片并以圆形展示代码分享（升级版增加遮罩）

已于 2022-04-01 14:53:38 修改
阅读量1.6k 收藏 4
点赞数
分类专栏： vue css javascript 文章标签： vue.js javascript 前端
于 2022-04-01 14:25:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TwoBE9876/article/details/123897001
版权
本文分享了一个使用Vue.js实现图片上传的功能，并将上传的图片以圆形展示的代码实现，同时还增加了遮罩效果。通过html、css和javascript的结合，为用户提供了一种优雅的图片预览体验。
摘要由CSDN通过智能技术生成

html

<div class="upload">
     <img id="img" width="100%" height="90%" :src="oneUrl" alt="头像">
     <input type="file" name="file" id="file" @change="getImgURL" title=''>
</div>

升级版html（新增遮罩）

<div class="upload">
    <img id="img" width="100%" height="90%" :src="oneUrl" alt="头像">
    <div class="mask">点击上传头像</div>
    <input type="file" name="file" id="file" @change="getImgURL" title="">
</div>

c

最低0.47元/天 解锁文章
TwoBE9876
关注
专栏目录
vue +websocket 加载动图并实现暂停与播放
weixin_58412143的博客
03-24 3658
需求：页面有小动图点击放大并实现暂停与播放 1、页面调用+点击放大以及调用组件时实现标题效果 <div class="" v-show="WRFgif"> <img @click="bigWRFgif()" id="testImg" class="Rightoneimg" :src="接口获取的地址" alt="" /> </div> //添加遮罩层，实现点击空白处关闭大图 <div class="msk" @click.self=
Spring Boot+VUE分片上传大文件到OSS服务器解决方案
wujize的博客
07-07 3492
根据项目需要，在很多地方都需要将超大文件上传到服务器，特别是将视频文件上传到云平台的OSS服务器上，这种需求在项目中已经是十分普遍的需求了。在网上收集了很多资料，基本上都只有JAVA到OSS服务器，或都VUE服务端到Spring Boot服务器。当前前后端开发已经十分普及了，大文件一般都保存到OSS服务器，不会保存到自己的主页服务器，OSS大文件服务器+tomcat为业务服务器+VUE/Ract/小程序前端服务器的三层后台架构是当前最主流的架构设计，因此必须解决这个问题。
基于vue上传的图片例子，支持传多图文件，支持拖拽上传图片，支持手机上传，pc上传。
08-14
基于vue上传的图片例子，支持传多图文件，支持拖拽上传图片，支持手机上传，pc上传。
vue 实现 input 上传图片
qq_41792905的博客
03-04 1721
代码 li 标签的显示与隐藏要使用v-show,使用v-if会报错。 <template> <div class="wrap"> <ul class="img_container"> <li v-show="img_url" style="position: relative"> <img class="show_img" :src="img_url" alt="" /> <span c
el-upload上传文件成功后样式改变问题
RenBaiLi的博客
01-11 1282
el-upload上传直接替代，不需要删除，不需要展示已上传文件列表 不能设置， mulitiply :show-file-list="false" handleExceed(files, fileList) { fileList[0].name = files[0].name },
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
蒋川@卡拉云
03-21 2195
手把手教你开发带预览的 Vue 图片上传组件，即图片上传管理后台。只要你跟本教程一步一步走，最终能很好的理解整个前后端传图的工程逻辑。前端我们使用 Vue + Axios + Multipart 来搭建前端上传图片应用，后端我们使用 Node.js + Express + Multer 来搭建后端上传图片的后端处理。
（vue+element）PC端图片打点
weixin_44056717的博客
09-18 1584
这是小弟写的第二篇博客，废话不多说 效果图 第一步： 左边的列表是用element组件 这样能实现element的滚动条和点击选择，不是很清楚的可以先去了解一下官网的组件。 第二步 点击列表获取当前数据，勾选后禁用再勾选 把获取的对象放到另一个数组里，这个数据就是地图打点的显示的数组 第三步 在右边图片进行操作，点击图片获取top和left赋值到刚刚的对象中，在push到数组里，然后把isCheck也丢进去，实现打点完成以后，禁用打点。 我自己定义了一个全局变量noPosition，是为了防止点击
cropper js基于vue的图片裁剪上传功能的实现代码
10-18
在Vue.js应用中实现图片裁剪上传功能时，可以利用Cropper.js库，它是一个强大的JavaScript图片裁剪工具。本文将详细介绍如何结合Vue.js和Cropper.js来创建一个图片裁剪上传组件。以下是一个基本的步骤和代码示例： ...
vue 上传多组图片以及给后台传值
weixin_42552058的博客
07-02 3798
vue 上传多组图片以及给后台传值 实现效果如图 以下是实现流程： html代码 <template> <div> <div class="Report_cover"></div> <div class="editPicture"> <!--编辑标题--> <div class="poupTi...
vue轮播图圆点显示
weixin_54362381的博客
08-27 1402
轮播图圆点显示 添加圆点配置 data (){ return{ swiperOptions:{ pagination:'.swiper-pagination’ //填写配置项，显示轮播圆点 } } } 组件里子组件自带样式修改（swiper的圆点） <style scoped> //样式穿透，wrapper下面所有子组件里出现swiper-pagination-b
自定义圆形图标
11-10
自定义圆形图标,圆形头像，
vue 创建图片坐标点_d3.js V5版本在vue里使用 自定义节点图片
weixin_42513944的博客
02-05 605
var width = this.$refs.topInfo.offsetWidth;var height = this.$refs.topInfo.offsetHeight;var img_w = 77;var img_h = 80;var radius = 30;//console.log(width,height)var svg = d3.select("#forceDirected").a...
在vue方法中使用$(this)实现图片以中心点放大
茶荼
01-12 564
1.需要添加鼠标移入移出时事件： 当前@mouseenter="mouseenterBox($event)"事件中的this=event.target 2.需要对父容器添加绝对定位，子容易添加相对定位样式 3.使用animate实现图片的宽度、高度、位移的缩放 <template> <div> <div class="solutionList" @mouseenter="mouseenterBox($event)" @mouseleave="mousele
vue 创建图片坐标点_vue使用高德地图根据坐标定位点的实现代码
weixin_40008339的博客
02-05 372
前言项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码正文 var map,marker;export default {data(){return{arriveCoor:[108.947025,34.2613255],//坐标点arrive:"",//位置信息}},mounted() {mapDraw(this.arriveCoor),mapCoor(this.arriveCoo...
vue 创建图片坐标点_vue数据渲染实现动态添加图片元素
weixin_39820136的博客
02-11 972
需求：通过点击界面实现动态添加图片，并且在点击的地方显示图片名称等信息。首先，我们可以通过点击事件的event获取点击的左边，点击事件对象提供了四种坐标属性，如下event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标(窗口坐标)，可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event....
vue轮播图组件，自动播放，小圆点或按钮进行切换
九亿宅男的梦的博客
06-10 916
默认自动播放，进入轮播图片或按钮取消播放，按钮以及圆点进行切换图片
vue+gaodemap 贴图 圈出区域和信息窗体以及点击事件
qq_32332433的博客
06-25 299
// 配置地图的基本显示 let that = this; var layer = new AMap.TileLayer({ titleSize: 120,// 瓦片大小 // getTileUrl: function (x, y, z) { // // var z = zeroPad(...
vue封装组件---图片中显示轨迹，点
温润如风的博客
03-25 1563
感觉好几千年都没有写博客了，今天终于闲下来写写了，听说提笔如有神，我这提手已经词穷了。 年初，经过部门的大整合，搞的我们组的人已经精疲了，为了员工的精神幸福？呵呵了。 虽说公司强大了，但是使用员工夜以继日的汗水来浇灌的。 写到这里吧，同事在呢！！！！ 废话就别说了，直接上代码，懂者自懂，不懂者我也无能为力。 <!-- *.vue: <template> ...
Vue 中 Echarts绘图 在一个圆环图或多个圆环图中间插入图片 插入文字（考虑到浏览器大小兼容问题）
热门推荐
Always on the road
10-25 1万+
之前一直掉进这个坑，没有跳出来，导致自己在这个问题上搞了很久，今天把这个坑写出来，避免大家都去踩这个坑啊~  在Vue项目结构中，如果引入图片的url不成功，记住，请一定要试一试在路径外加上 require() ！！！   也就是： require(../../images/test.png) 恩~~~现在开始讲一下具体的实现： （1）首先看一下我们要实现第一种只有一个圆环图中间插入图片，...
Vue+ElementUI表单与图片上传验证实战
“vue+elementUI实现表单和图片上传及验证功能示例” 在本文中，我们将探讨如何使用Vue.js框架结合Element UI库来构建一个包含表单输入和图片上传功能的界面，并实现相应的验证机制。Element UI是基于Vue.js的组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值