vue实现简单图片上传


Posted in Javascript onJune 30, 2020

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

功能

  • 实现图片上传
  • 显示进度条
<template>
 <div class="about">
 <div>
 <div>
 <img :src="'https://www.xxx.com'+item" alt="" v-for="item in pics" >
 </div>
 <label><input type="file" ref="file" @change="up()">+<span class="label" :style="{width:pre+'%'}"></span></label>
 </div> 
 </div>
</template>
<style scoped="scoped">
 label{
 width: 100px;
 height: 100px;
 display: inline-block;
 overflow: hidden;
 background-color: #CCCCCC;
 color: #FFFFFF;
 font-size: 48px;
 text-align: center;
 line-height: 100px;
 position: relative;
 }
 input{display: none;}
 .label{
 position: absolute;
 display: inline-block;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 0%;
 background-color: #FFA500; 
 }
 
</style>
<script>
 export default{
 name: 'About',
 data(){
 return{
 pics:[],
 pre:0,
 }
 },
 methods:{
 up(){
 var that=this;
 var file=this.$refs.file.files[0];
 var data=new FormData();
 data.append("file",file);
 this.$http.post("https://www.xxx.com/ajax/file.php",data,{
 onUploadProgress:e=>{
 this.pre=e.loaded/e.total*100
 console.log("+++",e)
 }
 })
 .then(res=>{
 if(res.data.error==0){
 this.pics.push(res.data.pic)
 console.log("----",res)
 }
 
 })
 .catch(err=>{
 console.log(err)
 })
 this.pre=0
 },
 
 }
 }
</script>

vue实现简单图片上传

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
Opacity.js
Jan 22 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
vue基于better-scroll仿京东分类列表
Jun 30 #Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 #Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 #Javascript
Postman动态获取返回值过程详解
Jun 30 #Javascript
JS简易计算器实例讲解
Jun 30 #Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 #Javascript
JSON获取属性值方法代码实例
Jun 30 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python处理CSV与List的转换方法
2018/04/19 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
有机童装:Toby Tiger
2018/05/23 全球购物
计算机应用毕业生自荐信
2013/10/23 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
优质服务活动实施方案
2014/05/02 职场文书
企业金融服务方案
2014/06/03 职场文书
与美同行演讲稿
2014/09/13 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
设置IIS Express并发数
2022/07/07 Servers