首页 / VUE / 详解vue 图片上传功能
详解vue 图片上传功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解vue 图片上传功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1757字,纯文字阅读大概需要3分钟。
内容图文
![详解vue 图片上传功能](/upload/InfoBanner/zyjiaocheng/333/e060b8affcc847198a0701b85bc550b7.jpg)
这次做了vue页面的图片上传功能,不带裁剪功能的!
首先是html代码,在input框上添加change事件,如下:
<ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative" v-if="imgs.length>=6 ? false : true"> <img src="../../assets/img/addimg.png"><input class="upload" @change='add_img' type="file"> </li> </ul>
我这里做了图片数量的限制,最多6张。
然后是data数据,如下:
data () { return { imgs: [], imgData: { accept: 'image/gif, image/jpeg, image/png, image/jpg', } } }
imgs数组是放图片路径的,页面显示图片就是循环这个数组,imgData是判断图片类型的。
接下来是最重要的methods里面的方法,具体如下:
add_img(event){ let reader =new FileReader(); let img1=event.target.files[0]; let type=img1.type;//文件的类型,判断是否是图片 let size=img1.size;//文件的大小,判断图片的大小 if(this.imgData.accept.indexOf(type) == -1){ alert('请选择我们支持的图片格式!'); return false; } if(size>3145728){ alert('请选择3M以内的图片!'); return false; } var uri = '' let form = new FormData(); form.append('file',img1,img1.name); this.$http.post('/file/upload',form,{ headers:{'Content-Type':'multipart/form-data'} }).then(response => { console.log(response.data) uri = response.data.url reader.readAsDataURL(img1); var that=this; reader.onloadend=function(){ that.imgs.push(uri); } }).catch(error => { alert('上传图片出错!'); }) },
首先是获取你选择的图片,判断图片的类型和大小,然后以form表单的形式提交到后台,后台会返回给你这个图片的线上路径,你把后台返回的图片路径push到图片数组里面就可以了。
一般情况下还有删除图片的方法,就是把图片数组里的那个路径删除掉,把数据提交到后台,告诉后台删除了哪张图片就可以了。
以上所述是小编给大家介绍的vue 图片上传功能详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的详解vue 图片上传功能全部内容,希望文章能够帮你解决详解vue 图片上传功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。