vue开发简单上传图片功能


Posted in Javascript onJune 30, 2020

本文实例为大家分享了vue实现简单上传图片功能的具体代码,供大家参考,具体内容如下

vue开发简单上传图片功能

vue简单的上传个图片的功能,主要代码:

<template>
<div class="plan_list">
    <div class="plan_name Upload_name">企业logo</div>
    <div class='Upload'>
     <input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*">
     <img src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" 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上传图片代码更改 完整代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
vue实现整屏滚动切换
Jun 29 #Javascript
vue实现页面切换滑动效果
Jun 29 #Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 #Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 #Javascript
You might like
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python内置函数OCT详解
2016/11/09 Python
python实现zabbix发送短信脚本
2018/09/17 Python
超简单使用Python换脸实例
2019/03/27 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
总经理岗位职责范本
2014/02/02 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
大学生就业策划书范文
2014/04/04 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
初中教师业务学习材料
2014/05/12 职场文书
领导干部对照检查材料
2014/08/24 职场文书
标准版离职证明书
2014/09/12 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
还款承诺书范本
2015/01/20 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
详解Spring事件发布与监听机制
2021/06/30 Java/Android
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers