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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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+APACHE实现用户论证的方法
2006/10/09 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue 实现锚点功能操作
2020/08/10 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
Python操作mongodb的9个步骤
2018/06/04 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python元组的概念知识点
2019/11/19 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
护士2014年终工作总结
2014/11/11 职场文书