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 相关文章推荐
Js动态创建div
Sep 25 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
vue 实现图片懒加载功能
Dec 31 Vue.js
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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
Content-type 的说明
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
js html实现计算器功能
2018/11/13 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python使用pymysql小技巧
2017/06/04 Python
Python程序运行原理图文解析
2018/02/10 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
详解pandas赋值失败问题解决
2020/11/29 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
大学自我鉴定范文
2013/12/26 职场文书
应届生自荐信范文
2014/02/21 职场文书
校园文明倡议书
2014/05/16 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书