带你用VUE实现上传图片的效果

时间：2023-03-30 14:03:47 CSS

摘要：逛b站的时候看到一个上传图片的效果，心想自己也可以做一个，因为原作者是用原生js写的，所以我还不如用vue写完呢，当然是一件很小的事情。直接在HTML文件中引用Vue即可。详细步骤如下~本文分享自华为云社区《vue实现上传图片并预览效果》，原作者：北极光之夜。.1.话不多说，先来看看效果：大家好，(????)?》这是我逛b站时看到的一张上传图片的效果。本以为自己可以做一个，因为原作者用的是原生js写的，还不如用vue写。当然，这是一件很小的事情。直接在HTML文件中引用vue即可。详细步骤如下~2.详细实现步骤：1.首先定义基本标签：不管标签中的vue说明如何，先定义基本HTML标签。

.upload是一个上传图片的框，里面有一个标签，里面是输入文件类型；.view是一个放图片的大盒子，每个小里都是一张图片，默认有一张图片。还有一个小li用于v-for渲染；delect是删除图片按钮；2.开始定义基本的css样式：这是全局和底部框的样式。*{保证金：0;填充：0；框大小：边框框；}#app{宽度：900px；背景色：rgb(241,241,241)；边距：50px自动；}3..viewStyle:.view{display:flex;证明内容：空间周围；弹性包装：包装；对齐项目：空间周围；}显示：弹性；弹性布局；证明内容：空间周围；项目间距对齐。弯曲经线：经线；新队。align-items:space-around:交叉轴的每个子项间隔对齐。4.图片样式：.view>li{width:200px;高度：120px；背景色：rgba(54,194,35,0.1)；列表样式：无；边距：20px；位置：相对；}。查看>li>img{宽度：100%；高度：100%；适合对象：覆盖；}对象适合：覆盖；图像保持其原始比例而没有拉伸。5、.deldect按钮的样式：.delect{position:absolute;右：0；顶部：0；宽度：20px；高度：20px；文本对齐：居中；行高：20px；字体大小：15px；背景颜色：rgba(255,255,255,0.5);用户选择：无；游标：指针；不透明度：0；}.delect:hover{背景颜色：rgba(31,31,31,0.5);：白色的;}.view>li:hover.delect{不透明度：1；}用户选择：无；无法选择文本；不透明度：0；透明度;6.更改input标签的样式：通过在input标签中包裹一个div，使input标签透明，然后为div设置想要的样式。可以为div设置一个double伪类元素，填写文字和样式。.upload{宽度：80px；高度：20px；背景色：rgba(135,206,235,0.2)；边框：1px黑色虚线；边界半径：5px；位置：相对；颜色：RGBA（135、206、235,1）；}.upload::before{位置：绝对；顶部：0；左：0；右：0；底部：0；content:'上传图片';字体大小：13px；文本对齐：居中；font-family:'fangsong';行高：20px；用户选择：无；}#file{宽度：100%；高度：100%；不透明度：0；}7.在我们的单页中引入vue并声明vue实例对象：8.给input标签绑定一个change事件，同时声明一个list数组：list数组会存放每张图片的地址data:{list:[]},9.定义上传方法，将所有选中的图片地址存储在list数组中：上传函数声明在methods:{}中。upload(e){//e.target指向事件执行时鼠标点击区域的元素，所以是输入标签，//可以输出e.target.files看，这个files对象保存所有选中的图片信息。console.log(e.target.files)//---------------------------------------------------//在这种情况下，循环这个文件对象，使用forof循环，for(letitemofe.target.files){//正则表达式，判断每个元素的type属性是否为图片形式，如图if(!/image\/\w+/.test(item.type)){//提示只能是图片，returnalert("只选择一张图片");返回;}//保存当前的this，也就是vue实例var_this=this;//创建一个FileReader()对象，它有一个readAsDataURL方法letreader=newFileReader();//readAsDataURL方法可以将上传的图片格式转换为base64，然后存储在图片路径中，//这样就可以在电脑的任何地方上传图片reader.readAsDataURL(item);//Triggerreader.addEventListener('load',function(){//reader.result文件读取成功后返回文件的内容//该属性只有在读取操作完成后才有效，并且文件的格式返回的数据取决于使用哪种读取方式进行读取操作。//将这个文件添加到数组中，就是图片的内容_this.list.push(this.result)})}//----------------------------------------------------------},10。页面显示数组的每张图片：×给小li绑定v-for循环，循环list数组，每个元素其实是一个地址，绑定到图片的src属性。index是为数组的每个元素设置一个索引值。可以理解为数组下标。11、定义删除图片的方法：先给删除框绑定一个点击事件，同时传入索引值，从而知道点击了哪张图片：×使用拼接的方式删除list数组中对应的数据。删除（索引）{console.log（索引）；this.list.splice(index,1);},//这是默认图片的方法，弹出默认图片不能删除noDelect(){alert('默认图片不能删除。')}}3.源码分享：下载地址如下：https://gitee.com/aurora-in-w...点击关注，第一时间了解华为云的新鲜技术~

上一篇：教你固定第一行第一列表格

下一篇：CSS面试知识BFC

带你用VUE实现上传图片的效果相关文章