vue开发简单上传图片功能
本文实例为大家分享了vue实现简单上传图片功能的具体代码,供大家参考,具体内容如下
vue简单的上传个图片的功能,主要代码:
<template><div class='plan_list'> <div class='plan_name Upload_name'>企业logo</div> <div class=’Upload’> <input type='file' name='pclogo' @change='xmTanUploadImg()' ref=’box’ accept='image/*'> <img src='https://www.haobala.com/static/img/Authentication/shxy.jpg' id='avarimgs'> </div> </div></template> <script>export default { name: 'feedShopping', data() { return {} }, methods: { //上传图片 xmTanUploadImg(){ var obj=this.$refs.box;//获取元素的dom var file = obj.files[0]; var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById('avarimgs');//获取图片id img.src = e.target.result;//给图片src路径赋值 //重要:这里可以把获取的src路径的 base64 格式的图片传给后端即可 } reader.readAsDataURL(file) },}<script> <style scoped>#avarimgs,#xdaTanFileImg{ width: 0.8rem; height: 0.8rem; border-radius: 0.1rem; margin: 0.1rem 0; float: right;}#xdaTanFileImg{ position: absolute; top: 0; right: 0; opacity: 0;}.Upload_name{ line-height: 1rem;} </style>
参照之前发布的 jquery上传图片代码更改 完整代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。
相关文章:
1. 在Asp.net core项目中使用WebSocket2. ASP.NET MVC使用异步Action的方法3. 浅谈springboot一个service内组件的加载顺序4. Python制作一个随机抽奖小工具的实现5. 使用vue-cli创建项目并webpack打包的操作方法6. matplotlib如何设置坐标轴刻度的个数及标签的方法总结7. 利用FastReport传递图片参数在报表上展示签名信息的实现方法8. python3.8.1+selenium实现登录滑块验证功能9. SpringMVC+Jquery实现Ajax功能10. 使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例