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 相关文章推荐
node.js中的fs.write方法使用说明
Dec 15 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 07 Javascript
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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
VBScript版代码高亮
2006/06/26 Javascript
dojo 之基础篇
2007/03/24 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python字典快速保存于读取的方法
2018/03/23 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python可视化实现KNN算法
2019/10/16 Python
Python笔记之代理模式
2019/11/20 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
新闻编辑自荐信
2013/11/03 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
安全检查管理制度
2014/02/02 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
社区活动策划方案
2014/08/21 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
工地食品安全责任书
2015/05/09 职场文书
高中美术教学反思
2016/02/17 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS